Download Canvas As Image In Javascript (Simple Example)

Welcome to a quick tutorial and example on how to download a canvas as an image in Javascript. So you have an HTML canvas that you want to offer as a download – No problem, we can do that with a few lines of code.

To download a canvas as an image file in Javascript:

  • var canvas = document.getElementById("CANVAS ID");
  • var anchor = document.createElement("a");
  • anchor.href = canvas.toDataURL("image/png");
  • anchor.download = "IMAGE.PNG";
  • anchor.click();

That covers the quick basics, but take note that forcibly clicking on the download link with Javascript may not always work. Read on if you need a detailed example!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Demo Download Canvas Useful Bits & Links
The End

 

DOWNLOAD & DEMO

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

DOWNLOAD CANVAS DEMO


 

DOWNLOAD CANVAS

All right, let us now get into the example of how to download a canvas as an image.

 

STEP 1) CREATE A DUMMY CANVAS

download.html
<!-- (A) DRAW DUMMY CANVAS -->
<canvas id="demo" width="200" height="200"></canvas>
<script>
let ctx = document.getElementById("demo").getContext("2d");
ctx.fillRect(0, 0, 100, 100);
ctx.fillRect(50, 50, 100, 100);
</script>

Well, nothing much to see here. Just generating a dummy “2 black squares” on the HTML canvas.

 

 

STEP 2) “FORCE” CANVAS DOWNLOAD

download.html
<!-- (B) GENERATE DOWNLOAD LINK -->
<input type="button" value="Download - JPG" onclick="candown('demo', 'jpg')"/>
<input type="button" value="Download - PNG" onclick="candown('demo', 'png')"/>
<input type="button" value="Download - GIF" onclick="candown('demo', 'gif')"/>
<input type="button" value="Download - WEBP" onclick="candown('demo', 'webp')"/>
<script>
function candown (target, type) {
  // (B1) GET CANVAS
  let canvas = document.getElementById(target);
 
   // (B2) CREATE LINK
  let anchor = document.createElement("a");
  anchor.download = "download." + type;
  anchor.href = canvas.toDataURL("image/" + type);
 
  // (B3) "FORCE DOWNLOAD"
  anchor.click();
  anchor.remove();
 
  // (B4) SAFER ALTERNATIVE - LET USER CLICK ON LINK
  // anchor.innerHTML = "Download";
  // document.body.appendChild(anchor);
}
</script>

This is pretty much doing the same stuff in the introduction snippet, but packaged into a function for your convenience:

  • (B1) Get the HTML canvas.
  • (B2) We create an HTML anchor link in Javascript – var anchor = document.createElement("a")
  • (B2) Set the “download as” filename – anchor.download = "image.png"
  • (B2) The magic happens when we do anchor.href = canvas.toDataURL(MIME-TYPE). Yes, this sets a base 64 encoded data URL to it.
  • (B3) So-called “force download”. Take note, this trick may not work on all browsers – Some may not allow click() on a link due to security settings.
  • (B4) The safer way is to attach the download link to the page itself – document.SOMEWHERE.appendChild(anchor)

 

 

USEFUL BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

COMPATIBILITY CHECKS

This example works on all modern browsers.

 

LINKS & REFERENCES

 

INFOGRAPHIC CHEAT SHEET

Download Canvas As Image (Click To Enlarge)

 

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published.