Snippets › Downloading canvas as Image (DataURL) on button click

To download HTML5 canvas DataURL on your computer on a button click, just create a link and point DataURL to its href attribute and trigger the click like so:

  var canvas = document.getElementById("mcanvas");
  image = canvas.toDataURL("image/png", 1.0).replace("image/png", "image/octet-stream");
  var link = document.createElement('a');
  link.download = "my-image.png";
  link.href = image;
  link.click();

Example :

    This site uses Akismet to reduce spam. Learn how your comment data is processed.