How to save HTML Canvas as a named .PNG using (only) Javascript

Question

I'm working on an image editor with the Html Canvas and JavaScript (just to learn even more about both languages). I've searched around but none of the questions I've found have worked. Here is what I have right now:

 <input type="text" id="PicName">
 <input type="button" value="Save" id="Save" onclick="Save()">
 <canvas style="border:1px solid blue;" id="myCanvas" width="800" height="800"></canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var timer = setInterval(gameLoop,10);

function gameLoop()
{

    var PicName = document.getElementById("PicName").value;

    ctx.fillStyle = "black";
    ctx.font = "30px Calbri";
    ctx.fillText(PicName,300,395);
}
</script>

PicName is the field were the person can input the name of the file. As you can see (if you give it a try) I've already gotten the PicName selector to work. So now I just need to save the file WITH the name.

Answer 1

Try something like this:

function downloadCanvas(link, canvasId, filename) {
link.href = document.getElementById(canvasId).toDataURL();
link.download = filename;

}

document.getElementById('download').addEventListener('click', function() {
    downloadCanvas(this, 'canvas', 'test.png');
}, false);

Here's a working version

 /** * Ken Fyrstenberg Nilsen * Abidas Software */ var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'); /** * Demonstrates how to download a canvas an image with a single * direct click on a link. */ function doCanvas() { /* draw something */ ctx.fillStyle = '#f90'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = '#fff'; ctx.font = '40px sans-serif'; ctx.fillText('Code Project', 10, canvas.height / 2 - 15); ctx.font = '16px sans-serif'; ctx.fillText('Click link below to save this as image', 15, canvas.height / 2 + 35); } /** * This is the function that will take care of image extracting and * setting proper filename for the download. * IMPORTANT: Call it from within a onclick event. */ function downloadCanvas(link, canvasId, filename) { link.href = document.getElementById(canvasId).toDataURL(); link.download = filename; } /** * The event handler for the link's onclick event. We give THIS as a * parameter (=the link element), ID of the canvas and a filename. */ document.getElementById('download').addEventListener('click', function() { downloadCanvas(this, 'canvas', 'test.png'); }, false); /** * Draw something to canvas */ doCanvas(); 

  body { background-color:#555557; padding:0; margin:0; overflow:hidden; font-family:sans-serif; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } canvas { border:1px solid #000; display: block; } #download { float:left; cursor:pointer; color:#ccc; padding:3px; } #download:hover { color:#fff; } 

 <canvas id="canvas">Sorry, no canvas available</canvas> <div><a id="download">Download as image</a></div>