title: Convert Canvas to image and save to disc
body: <p>There are many similar questions already, but for some reason they do not solve my issue.</p>
  
  <p>My project is to save a dynamically created page (or part of the page). The user will have the option to drag objects on screen and leave them in any order and then for this order to be saved to disc as an image.</p>
  
  <p>My own research shows that I can use <a href="http://jsfiddle.net/SkiWether/JVSFS/" rel="nofollow noreferrer">Draggable from JQuery</a> and this is easy to implement. It is the saving part where I am stuck.</p>
  
  <p>I followed a few <a href="https://stackoverflow.com/questions/923885/capture-html-canvas-as-gif-jpg-png-pdf">links</a>, but the image does not appear to be saving to disc and I don't think it works in IE! However, I'm happy with FireFox and so using the toDataUrl() sounds like the best approach.</p>
  
  <p>Since I couldn't get it work I decided to change tactic slightly and pass the value to the code behind (C#)</p>
  
  <p>The save part of my code looks like</p>
  
  <pre><code>&lt;script&gt;
      function SaveMe() {
          var canvas = document.getElementById("mycanvas");
          var image = canvas.toDataUrl();
          document.getElementById("hideMe").value = image;
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>When I debug in FireBug, I never reach <code>document.getElementById("hideMe").value = image;</code>. I step through but can never get past <code>var image = canvas.toDataUrl();</code> Is this expected behavior as I assume not but there is no error message?</p>
  
  <p>The body of my HTML is</p>
  
  <pre><code>&lt;body&gt;
      &lt;script type="text/javascript"&gt;
          $(document).ready(function () {
              $('.popup_click').show(0).draggable();    
          });    
      &lt;/script&gt;
  
      &lt;form id="form1" runat="server"&gt;
  
          &lt;div class="popup_click"&gt;
              &lt;div id="popup_title"&gt;Title&lt;/div&gt;
          &lt;/div&gt;
  
          &lt;canvas id="mycanvas" class="canvas"&gt;&lt;/canvas&gt;
  
          &lt;asp:HiddenField ID="hideMe" runat="server" /&gt;
          &lt;asp:Button runat="server" OnClick="ClickMe" text="Click" OnClientClick="SaveMe()"/&gt;
  
      &lt;/form&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>What am I doing wrong? I'm working locally in debug mode, Visual Studio 2013. </p>