Draw on HTML5 Canvas using a mouse

Beefing up the drawing experience

Let's take things up a notch and add some advanced features and slick enhancements to our basic drawing tool.

Introducing customization options

Add a slick color picker and a line width adjuster:

<label>Pick your Color: <input type="color" id="colorPicker" value="#000000"></label>
<label>Adjust Line width: <input type="number" id="lineWidth" min="1" value="1"></label>


Match the drawing color and line width with the selected options:

const colorPicker = document.getElementById('colorPicker'); // Our trusty palette 🎨
const lineWidth = document.getElementById('lineWidth');
ctx.strokeStyle = colorPicker.value;
ctx.lineWidth = lineWidth.value;

// When the artist changes their mind, we adapt
colorPicker.addEventListener('change', () => ctx.strokeStyle = colorPicker.value);
lineWidth.addEventListener('change', () => ctx.lineWidth = lineWidth.value);


Save the artwork

Provide a save button for the artists to cherish their masterpiece:

<button id="saveBtn">Save your Masterpiece 🏛️</button>


Trigger the download when the button is clicked:

document.getElementById('saveBtn').addEventListener('click', () => {
    const dataURL = canvas.toDataURL('image/png');
    const a = document.createElement('a');
    a.href = dataURL;
    a.download = 'canvas-masterpiece.png'; // Say cheese! 📸 
    a.click();
});


Revisions and corrections

We all make mistakes, so let's add an eraser:

<button id="eraserBtn">Forget That Ever Happened 🧽</button>


Switch the stroke style to the background color or make it transparent when the eraser is clicked:

document.getElementById('eraserBtn').addEventListener('click', () => {
    ctx.globalCompositeOperation = 'destination-out';
    ctx.lineWidth = 10; // Because size does matter!
});


Don't forget to switch back to normal drawing mode:

colorPicker.addEventListener('change', () => {
    ctx.globalCompositeOperation = 'source-over';
    ctx.strokeStyle = colorPicker.value;
});


Electrical Wiring 101: Bundling your code in a class

"All the world's a stage" and so is our class called SignTool where most of our play takes place:

class SignTool {
    constructor(canvasId, options) { // Rolling out the red carpet
        this.canvas = document.getElementById(canvasId);
        this.ctx = this.canvas.getContext('2d');
        this.setOptions(options); // The director's cut
        this.attachEventListeners();
    }
    // ...more drama planned
}


Creating responsive apps that adjust to all stage sizes is all the rage now:

resizeCanvas() { // One size fits all! Tailor-made to perfection
    this.canvas.width = window.innerWidth;
    this.canvas.height = window.innerHeight;
    this.ctx.strokeStyle = this.options.color;
    this.ctx.lineWidth = this.options.lineWidth;
}


Does ctx.lineJoin and ctx.lineCap ring a bell? They're your best friends in crafting smooth lines. Brush up your skills with ctx.createPattern() and ctx.createLinearGradient(). Feeling adventurous? Try pressure.js to simulate pressure levels.