DEV Community

loading...
Cover image for Vanilla JavaScript save canvas as an image

Vanilla JavaScript save canvas as an image

dailydevtips1 profile image Chris Bongers Originally published at daily-dev-tips.com ・2 min read

Yesterday we got started on our basic canvas course.
Thinking about the project I want to do, I need to export the canvas as an image.

So how do we convert the canvas to an image?

There are actually two ways of doing this, and we will explore both.

See the end result on this Codepen.

1. Right-click to save

Everyone knows this option, but we can just right-click to save on the canvas.

This will only work in certain browsers, so it's not the most valid way of saving it.

Canvas save to image right click

Note: Keep in mind the canvas has no background!

2. Adding a download button

The other option is to add a download button to our page. This download button will then export the canvas content en open the base64 image in another tab.

Adding the button:

<canvas id="canvas" height="200"></canvas>
<br />
<button id="download">Download</button>
Enter fullscreen mode Exit fullscreen mode

Now let's add the button variable to our JavaScript

const download = document.getElementById('download');
Enter fullscreen mode Exit fullscreen mode

Awesome, now we need to add a eventListener to it and listen to the click command.

download.addEventListener('click', function(e) {
  var link = document.createElement('a');
  link.download = 'download.png';
  link.href = canvas.toDataURL()
  link.click();
  link.delete;
});
Enter fullscreen mode Exit fullscreen mode

We create a temporary ahref on which we will place the canvas's data url and then click it.

We are using the toDataURL function which returns a base64 string that looks something like this:

// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
Enter fullscreen mode Exit fullscreen mode

Browser Support

The canvas element is well supported these days and is defiantly a good option if you want to draw vectors on screen.

HTML Canvas support

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Discussion (3)

pic
Editor guide
Collapse
miques profile image
Miques

Can you look at my question please stackoverflow.com/questions/648788...

Collapse
dailydevtips1 profile image
Chris Bongers Author

Thanks for reaching out, just posted a response to your topic.
Hope it helps! ✌️

Collapse
miques profile image
Miques

I saw your response, thank you.