HTML5 Web Application Development By Example Beginner's guide

Time for action – exporting an image

We can draw pictures with our Canvas Pad application, but what's the point if we can't save them? HTML5 doesn't have the capability to save files directly to the user's file system because of the security risks. So our options on the client side are pretty limited. We can save the data to localStorage or we can open the image in a new browser window, where the user can save the image using the browser's Save option. We will do the latter because it allows the user to get a real image file they can use.

You can get the image data as a URL from a canvas by calling the toDataURL() method on the canvas element itself (not the context). Then you can open the image URL in another window using window.open(). Let's ...