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