Saving a canvas drawing as an image

In addition to saving the canvas drawing in local storage or in an offline database, we can also use an image data URL to save the canvas drawing as an image so that a user can then save it to their local computer. In this recipe, we'll get the image data URL of the canvas drawing and then set it to the source of an image object so that a user can right click and download the image as a PNG.

Follow these steps to save a canvas drawing as an image:

How to do it...

  1. Define the canvas context and draw a cloud shape:
    window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); // draw cloud context.beginPath(); // begin custom shape context.moveTo(170, 80); context.bezierCurveTo(130, ...

Get HTML5 Canvas Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.