Saving and automatically Download Canvas drawing using Javascript or ajax

Question

I have a canvas drawing that I want to save and download automatically when a button is clicked. I will like to implement it in javascript or ajax as long as the saved data will be downloaded automatically. I do not need to save it to the server...

  var canvas = document.getElementsByClassName('whiteboard')[0];

<canvas id='canvas' ></canvas>
<button id="scan" />Save</button>

Thanks

@Perumal He simply wants to trigger a download of an image of his `canvas` - Quite clear IMO but a duplicate nonetheless — nicholaswmin, Dec 17 '17 at 20:36
Possible duplicate of [Capture HTML Canvas as gif/jpg/png/pdf?](https://stackoverflow.com/questions/923885/capture-html-canvas-as-gif-jpg-png-pdf) — nicholaswmin, Dec 17 '17 at 20:36

score 2 · Answer 1 · answered Dec 17 '17 at 20:34

I am guessing that you don't need to save at all, just to download your drawing on canvas as image when button is clicked?

There are some good articles on that subject, but here is practical example of what you are trying to do (if my guess is true): Save canvas as image

So basically you add click event listener on your anchor tag with canvas image data uri as href attribute

link.addEventListener('click', function(ev) {
    link.href = canvas.toDataURL();
    link.download = "mypainting.png";
}, false);

Saving and automatically Download Canvas drawing using Javascript or ajax

1 Answers1