How do you save HTML5 canvas?

Use HTML5 canvas' toDataURL method in JavaScript.

In this example we will draw to one canvas then copy the data to a different canvas.

First we assign references to the canvas and context for both canvases.

var canvas1 = document.getElementById('canvas1');
var context1 = canvas1.getContext("2d");

var canvas2 = document.getElementById('canvas2');
var context2 = canvas2.getContext("2d");

Draw a red square on the first canvas.

context1.fillStyle = "#ff0000";
context1.fillRect(8, 8, 32, 32);

Use toDataUrl to copy the current state of the first canvas to an image object and draw it to the second canvas.

var img = new Image();
img.onload = function () {
    context2.drawImage(img, 0, 0);
}
img.src = canvas1.toDataURL('image/png');