how to save canvas as png image?

try this:

var canvas = document.getElementById("alpha");var dataURL = canvas.toDataURL("image/png");var newTab = window.open('about:blank','image from canvas');newTab.document.write("<img src='" + dataURL + "' alt='from canvas'/>");

This shows image from canvas on new page, but if you have open popup in new tab setting it shows about:blank in address bar.

EDIT:- though window.open("<img src='"+ canvas.toDataURL('image/png') +"'/>") does not work in FF or Chrome, following works though rendering is somewhat different from what is shown on canvas, I think transparency is the issue:

window.open(canvas.toDataURL('image/png'));

FileSaver.js should be able to help you here.

var canvas = document.getElementById("my-canvas");// draw to canvas...canvas.toBlob(function(blob) {    saveAs(blob, "pretty image.png");});

I used this solution to set the file name:

HTML:

<a href="#" id="downloader" onclick="download()" download="image.png">Download!</a><canvas id="canvas"></canvas>

JavaScript:

function download(){    document.getElementById("downloader").download = "image.png";    document.getElementById("downloader").href = document.getElementById("canvas").toDataURL("image/png").replace(/^data:image\/[^;]/, 'data:application/octet-stream');}