Because it uses external functions, this is sort of a hack, but it does seem to work on any browser. I'm using the tool FileSaver.js to do the file download work, and canvas-toBlob.js to perform the toBlob functioning on Chrome and other browsers.
<script src="https://rawgit.com/eligrey/FileSaver.js/master/FileSaver.js"></script>
<script src ="https://rawgit.com/eligrey/canvas-toBlob.js/master/canvas-toBlob.js"></script>
<h1 onclick="download_image()">Click Here to download image</h1>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
<script>
// lets put something on a canvas..
// reminder this works without jQuery .ready() only because this script is the last element in the document.
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
function download_image(){
// Dump the canvas contents to a file.
var canvas = document.getElementById("myCanvas");
canvas.toBlob(function(blob) {
saveAs(blob, "output.png");
}, "image/png");
};
</script>
