How to Save HTML Canvas as an Image
Tags: html, javascript, webdev, tutorial
Published: 2022-03-22 14:05:08

Canvas gives us a lot of flexibility to create great, code generated graphics, and sometimes we need to download them as images. Fortunately, this is quite easy with HTML canvas. Here is an example, where clicking the button downloads the canvas as an image:

{% codepen https://codepen.io/smpnjn/pen/mdpEWEN %}

Let's look at how this works.

## Downloading a Canvas as an Image
In the example above, we've created a canvas image and a button you can click to download it. This button uses `toDataURL()` to convert our canvas to an image URL data string. When we click on it we get our original canvas, and then create an anchor to download it immediately:

```javascript
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

// Canvas code goes here 
// ...

document.getElementById('download').addEventListener('click', function(e) {
    // Convert our canvas to a data URL
    let canvasUrl = canvas.toDataURL();
    // Create an anchor, and set the href value to our data URL
    const createEl = document.createElement('a');
    createEl.href = canvasUrl;

    // This is the name of our downloaded file
    createEl.download = "download-this-canvas";

    // Click the download button, causing a download, and then remove it
    createEl.click();
    createEl.remove();
});
```

Javascript struggles a bit with native downloads, so we are emulating a link click instead. We do that by creating the anchor using createElement, and then using click() to click on it. This achieves the same outcome.

The key thing to remember is to use toDataURL, which encodes our image data as a string that is easily downloaded.

## How toDataURL() works
`toDataURL()` converts a canvas element to a long image encoding string. Let's look at our example:

```javascript
// Convert our canvas to a data URL
let canvasUrl = canvas.toDataURL();
console.log(canvasUrl);
// Outputs 
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABRQAAANSCAYAAAAUN0KjAAAAAXNSR0IArs4c6QAAIABJREFUeF7sfVuSJLeOrNrsaP/7GM227pmZVehaZTxIgni...
```

By default, `toDataURL()` creates a png image. But fortunately it has options to let us change that if we want.

## Saving images from canvas as other formats
`toDataURL(type, encoderOptions)` has two arguments which lets us change the way the canvas is encoded. This lets us save files as other formats, such as jpg.

Those two arguments can be defined as follows:

- `type`, which is a filetype, in the format image/png.
- `encoderOptions`, which is a number between 0 and 1, defining the image quality. This is only supported by file formats that have lossy compression, like webp or jpg.

For example, if we wanted to save our image as a .jpg with a quality of 59%, we could write the following:

```javascript
// Convert our canvas to a data URL
let canvasUrl = canvas.toDataURL("image/jpeg", 0.5);
console.log(canvasUrl);
// Outputs 
// "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAA...
```

By default, all browsers support image/png. Other formats, like image/jpeg and `image/webp` are widely supported. Support on `image/webp` can be found here.

## Conclusion
Saving canvas elements as images is straightforward and only relies on toDataURL. If you want to learn about saving canvas images in a real world setting on the backend, [you can read my tutorial on that here](https://fjolt.com/article/javascript-auto-generating-post-thumbnails).