Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Sitemap
Menu

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

Posted on October 1, 2022

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.

 

Recent Posts

  • Build a Fixed Deposit Interest Calculator Using Amount and Time in Browser Using HTML5 & Javascript
  • How to Download Files From URL in Node.js Using Node-Downloader-Helper Library
  • Angular 10 Image Carousel and Video Gallery Lightbox Modal Slider Using ng-image-slider Library
  • React Unsplash Api Photo Search App
  • React Form Validation Using Formik and Yup
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • javascript
  • Koajs
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme