How to download an HTML5 canvas as an image using JavaScript

After drawing to the canvas, you may want to download and save the canvas drawing as an image. To do this, you can use the toDataURL() method of the canvas object.

Let's say you have a "Download" button in your HTML:

<input type="button" id="downloadBtn" value="Download">

The download and save functionality will be handled within the following downloadImage() function, which can be added to your JavaScript file:

function downloadImage() {

    // Grab the canvas element
    let canvas = document.getElementById("canvas");

    // Create a PNG image of the pixels drawn on the canvas using the toDataURL method.
    var dataURL = canvas.toDataURL("image/png");

    // Create a dummy link text
    var a = document.createElement('a');
    // Set the link to the image so that when clicked, the image begins downloading
    a.href = dataURL
    // Specify the image filename
    a.download = 'canvas-download.jpeg';
    // Click on the link to set off download
    a.click();
}

Finally, we add a handler to call downloadImage() whenever the download button is clicked.

let download = document.getElementById('downloadBtn')
download.addEventListener('click', downloadImage)

Note that some browsers won't let you save an image from the canvas if the code is running from a file:// host. If your code does not work, try running it from a local server.