Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

Javascript Canvas API Project to Export Drawing Canvas and Download it as PNG Image in Browser

Posted on October 2, 2022

Welcome folks today in this blog post we will be using the canvas api to export drawing canvas and download it as png image file. All the full source code of the application is given below.

 

 

Get Started

 

 

In order to get started you need to make a index.html file and copy paste the following code

 

 

index.html

 

 

1
2
3
<canvas id="c" width="500" height="500"></canvas>
<br>
<button id="save">Save</button>

 

 

Here as you can see we are drawing a canvas of width and height 500 each. And also we have the button which has the label button. When we click the button we need to export this canvas drawing to a PNG image file.

 

Now we also need to add some styles.css to this application. Here we will be adding some black border to the canvas as shown below

 

1
2
3
<style>
  canvas { border: 1px solid #ddd; }
</style>

 

 

And now we will be writing the javascript code to actually draw inside the canvas as shown below

 

 

script.js

 

 

1
2
const gCanvas = document.querySelector('#c');
const gCtx = gCanvas.getContext('2d');

 

 

Here we are getting the reference of the canvas element. And then in the next step we are using the 2d context of the canvas. After that we will try to draw using the 2d context inside the canvas.

 

 

Attaching Mouse Event Listeners to Canvas

 

 

Here in this step guys we will be attaching the mouse events inside the canvas such that we will be drawing it inside the canvas using the mouse.

 

 

1
gCanvas.addEventListener('mousedown', onMouseDown);

 

 

Here we are telling the browser when we press the mouse down we need to execute the function which is called onMouseDown as shown below

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function onMouseDown(e) {
  e.preventDefault();  
  window.addEventListener('mousemove', onMouseMove);
  window.addEventListener('mouseup', onMouseUp);
}
 
function onMouseMove(e) {
  e.preventDefault();
  gCtx.fillRect(e.offsetX - 4, e.offsetY - 4, 8, 8);
}
 
function onMouseUp(e) {
  e.preventDefault();
  window.removeEventListener('mousemove', onMouseMove);
  window.removeEventListener('mouseup', onMouseUp);
}

 

 

Here we are using the addEventListener method to attach the methods when we move the mouse and also click when the mouse is up. And also we are removing the event listeners from the mouse by using removeEventListener method

 

 

Exporting Canvas as Blob

 

 

Now in the last step we need to export the drawing canvas to a blob object and then we will be using the anchor element to dynamically download the file as an png image as an attachment.

 

 

1
2
3
4
5
6
7
8
9
10
11
function onSave() {
  gCanvas.toBlob((blob) => {
    const timestamp = Date.now().toString();
    const a = document.createElement('a');
    document.body.append(a);
    a.download = `export-${timestamp}.png`;
    a.href = URL.createObjectURL(blob);
    a.click();
    a.remove();
  });
}

 

 

In this block of code we are using the two important methods which are as follows

 

toBlob() Method which is responsible for exporting the drawing canvas to blob object.

 

createObjectURL() Method is responsible for creating the Object URL of the blob image

 

 

Full Source Code

 

 

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  canvas { border: 1px solid #ddd; }
</style>
<body>
  <canvas id="c" width="500" height="500"></canvas>
<br>
<button id="save">Save</button>
</body>
<script>
  const gCanvas = document.querySelector('#c');
const gCtx = gCanvas.getContext('2d');
 
function onMouseDown(e) {
  e.preventDefault();  
  window.addEventListener('mousemove', onMouseMove);
  window.addEventListener('mouseup', onMouseUp);
}
 
function onMouseMove(e) {
  e.preventDefault();
  gCtx.fillRect(e.offsetX - 4, e.offsetY - 4, 8, 8);
}
 
function onMouseUp(e) {
  e.preventDefault();
  window.removeEventListener('mousemove', onMouseMove);
  window.removeEventListener('mouseup', onMouseUp);
}
 
function onSave() {
  gCanvas.toBlob((blob) => {
    const timestamp = Date.now().toString();
    const a = document.createElement('a');
    document.body.append(a);
    a.download = `export-${timestamp}.png`;
    a.href = URL.createObjectURL(blob);
    a.click();
    a.remove();
  });
}
 
 
gCanvas.addEventListener('mousedown', onMouseDown);
document.querySelector('#save').addEventListener('click', onSave);
</script>
</html>

 

 

 

Recent Posts

  • Android Kotlin Project to Load Image From URL into ImageView Widget
  • Android Java Project to Make HTTP Call to JSONPlaceholder API and Display Data in RecyclerView Using GSON & Volley Library
  • Android Java Project to Download Youtube Video Thumbnail From URL & Save it inside SD Card
  • Android Java Project to Embed Google Maps & Add Markers Using Maps SDK
  • Android Java Project to Download Random Image From Unsplash Using OkHttp & Picasso Library & Display it
  • 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