How to download a canvas image?

Answer 1

I am not sure about download but try right click save as.

Answer 2

https://code.sololearn.com/WlwO66f9bgTx/?ref=app

Answer 3

If you're okay with user action required (right click on an image), you could ask the canvas to output its content as base64-encoded data (it looks like this, internally):
https://code.sololearn.com/W9yG8qZkeF7T/?ref=app

...but you would inject it into the page as a downloadable image:

// create a dynamic image element
var imgEl = document.createElement('img');

// transfer base64-encoded image data
imgEl.src = canvas.toDataURL();

// insert and render the image
document.body.appendChild(imgEl);

Answer 4

Returning because I got pinged, the issue to overcome with "downloads" is initiating a *protocol* (http) download via *scripting* (which is not http) -- because you need the browser to receive headers and a MIME type.

So, two other solutions, because canvas doesn't support right-click:
* Round-trip it to a server -- avoided in my previous answer as unnecessarily complicated -- but you could just xhr() or fetch() that.

* Just occurred to me: an overlay image that uses toDataURL() but overlays a right-clickable image:
https://weworkweplay.com/play/saving-html5-canvas-as-image/

That gets you right click with some blocks-client disadvantages, but it's more like a tutorial than my answers.