Download HTML Canvas As Image In Javascript (Simple Example)

Welcome to a quick tutorial and example on how to download an HTML 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.

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.

 

 

TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

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

 

 

STEP 1) CREATE A DUMMY CANVAS

<!-- (A) DRAW DUMMY CANVAS -->
<canvas id="demo" width="200" height="200"></canvas>
<script>
let ctx = document.getElementById("demo").getContext("2d");
ctx.fillRect(30, 30, 50, 50);
ctx.fillRect(120, 30, 50, 50);
ctx.beginPath();
ctx.moveTo(10, 120);
ctx.bezierCurveTo(10, 180, 190, 180, 200, 120);
ctx.stroke();
</script>

Well, nothing much to see here. Just generating a dummy “smiley face” on the HTML canvas.

 

 

STEP 2) “FORCE” CANVAS DOWNLOAD

<!-- (B) GENERATE DOWNLOAD LINK -->
<input type="button" value="JPG" onclick="candown('demo', 'jpg')">
<input type="button" value="PNG" onclick="candown('demo', 'png')">
<input type="button" value="GIF" onclick="candown('demo', 'gif')">
<input type="button" value="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)

 

 

 

COMPATIBILITY CHECKS

• Canvas – CanIUse
• To Data URL – CanIUse

This example works on all modern browsers.

 

LINKS & REFERENCES

• Canvas To Data URL – MDN

 

INFOGRAPHIC CHEAT SHEET