With HTML5’s Canvas we can draw nice graphics. But how we can save it as an image? Of course we can right click on the canvas and download that image. But here I’m going to share a script to download it programmatically by a clicking a link.
<!DOCTYPE html>
<html>
<head>
<title>ZK Tutorials</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #000000;"></canvas>
<br>
<a id="downloadbtn">Click to Download</a>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillRect(10, 10, 100, 100);
ctx.fillRect(120, 120, 50, 50);
ctx.fillRect(200, 200, 70, 70);
var imagelink = document.getElementById("downloadbtn");
imagelink.href = c.toDataURL("image/png").replace("image/png", "image/octet-stream");
imagelink.download = "ImageFromCanvas.png";
</script>
</body>
</html>
You can try it in this live preview: