Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
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

  • Node.js Tutorial to Export All Pages of PDF Document to Images and Save it in Javascript
  • Node.js OfficeGen Example to Add Text & Images in Powerpoint Presentation in Javascript
  • Node.js OfficeGen Example to Generate Excel Files By Adding Data inside Cells & Sheets in Javascript
  • Node.js OfficeGen Example to Create Word Docx Files & Add Text Images inside it Using Javascript
  • React.js Twitter API Tutorial to Embed Profile & Timeline, Hashtags of User in Browser Using Javascript
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme