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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!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> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
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.