title: How to save an HTML5 canvas element as an image?
body: <p>I am using IBM Worklight 6.0 to develop a native mobile app.</p>
  
  <p>I have one canvas element in the app which I need to save as an image file in the local storage of mobile device. The code is given below:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="sketch"&gt;
      &lt;canvas id="paint"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  &lt;input type="button" name="saveCanvas" value="Save" onclick="saveCanvas()"&gt;
  
      &lt;script src="js/canvas.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>Java Script:</strong></p>
  
  <pre><code>function saveCanvas() {
  
   var canvas = document.getElementById("paint");        
   var context = canvas.getContext("2d");                   
  
   var myimage = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); 
   window.location.href=myimage; 
  
  }
  </code></pre>
  
  <p>I need a pop up window to allow user to save the image in local storage. Now the problem is, when I test the app in Worklight Mobile Browser Simulator, a pop up window opens to save the image but it does not work when I test it in Android Virtual Device or in my device.</p>
  
  <p>Please help me to know how can I save my canvas as an image in local storage of the device. </p>