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

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

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

<br>

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

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

<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

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

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.

gCanvas.addEventListener('mousedown', onMouseDown);

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

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 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.

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();
  });
}

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

<!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>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<style>

canvas { border: 1px solid #ddd; }

</style>

<body>

<br>

</body>

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>