Your goNinjaAndTurnIntoRealPng()
approach only works if you send the image data to the server and save it there (in order to get a path like "../local/img.png"
) - depends on your application if that makes sense.
If you just want to enable users to directly download the canvas as PNG, you could trigger the image download as follows. Personally, I prefer this approach because users don't have to manually click "save as" - it's a lot more usable.
<canvas id="canvas" width="880" height="720"></canvas><br>
<!-- Note the "download" attribute here that specifies a filename -->
<a download="canvas_image.png" id="click">Save PNG image</a>
<script>
var canvas = document.getElementById("canvas");
document.getElementById("click").onclick = function(){
this.href = canvas.toDataURL("image/png");
};
</script>
Demo (JSFiddle) (tested in Firefox and Chrome)
Also see this question which provides some more info.