Javascript Fabric.js Example to Export Drawing Canvas to Image & PDF Document in Browser

Welcome folks today in this blog post we will be exporting drawing canvas to image and pdf document in browser using fabric.js library in javascript. All the full source code of the application is shown below.

Get Started

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

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Fabric.js Example</title>
    <!-- include Fabric.js CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js"></script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Fabric.js Example</title>

</head>

<body>

</body>

</html>

As you can see we are including all the cdn of the libraries including the fabric.js and jspdf and the filesaver.js library which will be used to download the file as an attachment in browser.

Now we need to define the body in which we will be have the canvas element and also the input fields for choosing the color of the brush and also the size of the brush as shown below

<canvas id="canvas" width="500" height="500" style="border: 1px solid black;"></canvas>
<input type="color" id="color-picker" value="#000000">
<label for="brush-size">Brush size:</label>
<input type="range" id="brush-size" min="1" max="100" value="5">

<button id="export-btn">Export Canvas</button>

<label for="brush-size">Brush size:</label>

<button id="export-btn">Export Canvas</button>

And now we need to define the javascript code for this project as shown below

<script>
    // Get the canvas element
    const canvas = document.getElementById('canvas');
    // Get the canvas context
    const ctx = canvas.getContext('2d');

    let color = "#000"

    let brushSize = 5;


    // Set the initial mouse position to null
    let mouse = { x: null, y: null };

    // Add event listeners for mouse down, move, and up
    canvas.addEventListener('mousedown', (e) => {
        mouse.x = e.clientX;
        mouse.y = e.clientY;
    });

    const colorPicker = document.getElementById('color-picker');

    colorPicker.addEventListener('input', () => {
        color = colorPicker.value;
    });

    const brushSizeInput = document.getElementById('brush-size');

    brushSizeInput.addEventListener('input', () => {
        brushSize = brushSizeInput.value;
    });

    canvas.addEventListener('mousemove', (e) => {
        if (mouse.x && mouse.y) {
            ctx.beginPath();
            ctx.moveTo(mouse.x, mouse.y);
            ctx.lineTo(e.clientX, e.clientY);
            ctx.strokeStyle = color;
            ctx.lineWidth = brushSize;
            ctx.stroke();
            mouse.x = e.clientX;
            mouse.y = e.clientY;
        }
    });

    canvas.addEventListener('mouseup', () => {
        mouse.x = null;
        mouse.y = null;
    });

    // Export the canvas to an image data URL when the button is clicked
    document.getElementById('export-btn').addEventListener('click', function () {
        var imgData = canvas.toDataURL({
            format: 'png',
            quality: 1
        });
        var img = new Image();
        img.src = imgData;
        document.body.appendChild(img);

        saveAs(imgData,"file.png")

        var doc = new jsPDF();

        // add the image to the document
        doc.addImage(imgData, 'PNG', 10, 10);

        // save the document
        doc.save('canvas.pdf');
    });
</script>

// Get the canvas element

const canvas = document.getElementById('canvas');

// Get the canvas context

const ctx = canvas.getContext('2d');

let color = "#000"

let brushSize = 5;

// Set the initial mouse position to null

let mouse = { x: null, y: null };

// Add event listeners for mouse down, move, and up

canvas.addEventListener('mousedown', (e) => {

mouse.x = e.clientX;

mouse.y = e.clientY;

});

const colorPicker = document.getElementById('color-picker');

colorPicker.addEventListener('input', () => {

color = colorPicker.value;

});

const brushSizeInput = document.getElementById('brush-size');

brushSizeInput.addEventListener('input', () => {

brushSize = brushSizeInput.value;

});

canvas.addEventListener('mousemove', (e) => {

if (mouse.x && mouse.y) {

ctx.beginPath();

ctx.moveTo(mouse.x, mouse.y);

ctx.lineTo(e.clientX, e.clientY);

ctx.strokeStyle = color;

ctx.lineWidth = brushSize;

ctx.stroke();

mouse.x = e.clientX;

mouse.y = e.clientY;

}

});

canvas.addEventListener('mouseup', () => {

mouse.x = null;

mouse.y = null;

});

// Export the canvas to an image data URL when the button is clicked

document.getElementById('export-btn').addEventListener('click', function () {

var imgData = canvas.toDataURL({

format: 'png',

quality: 1

});

var img = new Image();

img.src = imgData;

document.body.appendChild(img);

saveAs(imgData,"file.png")

var doc = new jsPDF();

// add the image to the document

doc.addImage(imgData, 'PNG', 10, 10);

// save the document

doc.save('canvas.pdf');

});

</script>

As you can see we are drawing inside the canvas with the help of the mouse and then we are exporting the canvas to imgData using the fabric.js library and then we are exporting the imgData to png image and then to pdf document using the jspdf library.