Javascript Project to Export Canvas & Download it as PNG Image in Browser

Welcome folks today in this blog post we will be exporting canvas to image and download it as png image in browser. All the full source code of the application are as follows

index.html

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>How to Reset HTML5 Form in Javascript</title>
</head><style>
    canvas {
  border: 1px solid #000;
}
</style>

<body>
    <canvas id="canvas" height="200"></canvas>
    <br />
    <button id="download">Download</button>
</body>
<script src="script.js"></script>

</html>

<!doctype html>

<html>

<head>

<title>How to Reset HTML5 Form in Javascript</title>

</head><style>

canvas {

border: 1px solid #000;

}

</style>

<body>

<br />

<button id="download">Download</button>

</body>

</html>

In this above section of code we have the canvas of width and height which is 200. We have given the id canvas to it so that we can target the canvas in the javascript. And also we have the button to download the image.

script.js

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const download = document.getElementById('download');

// Cirlce
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.stroke();

// Triangle
ctx.beginPath();
ctx.moveTo(200, 75);
ctx.lineTo(100, 75);
ctx.lineTo(100, 25);
ctx.fill();

// Hearth
ctx.beginPath();
ctx.moveTo(75, 40);
ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
ctx.stroke();

download.addEventListener('click', function(e) {
  console.log(canvas.toDataURL());
  const link = document.createElement('a');
  link.download = 'download.png';
  link.href = canvas.toDataURL();
  link.click();
  link.delete;
});

const canvas = document.getElementById('canvas');

const ctx = canvas.getContext('2d');

const download = document.getElementById('download');

// Cirlce

ctx.beginPath();

ctx.arc(100, 100, 50, 0, 2 * Math.PI);

ctx.stroke();

// Triangle

ctx.beginPath();

ctx.moveTo(200, 75);

ctx.lineTo(100, 75);

ctx.lineTo(100, 25);

ctx.fill();

// Hearth

ctx.beginPath();

ctx.moveTo(75, 40);

ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);

ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);

ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);

ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);

ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);

ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);

ctx.stroke();

download.addEventListener('click', function(e) {

console.log(canvas.toDataURL());

const link = document.createElement('a');

link.download = 'download.png';

link.href = canvas.toDataURL();

link.click();

link.delete;

});

And in this javascript section of code we are drawing inside the canvas with the help of canvas methods. When we click the button we are using the canvas.toDataURL() method to export the canvas to an actual png image which will be downloaded as an attachment. We also drawn some colorful shapes inside the canvas. In the canvas we have the triangles, circles and rectangles.

And then we are creating the anchor element dynamically and downloading the image as an attachment.