JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="400" height="400" style="border: 1px solid black;"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var canvasPos = canvas.getBoundingClientRect();

var dragging = false;
var x, y;

$(canvas).mousedown(mouseDown);
$(canvas).mouseup(mouseUp);
$(canvas).mousemove(mouseMove);

function mouseDown(e) {
    var pos = getCursorPosition(e);
                
    dragging = true;
    x = [pos.x];
    y = [pos.y];
}
            
function mouseUp(e) {
    dragging = false;
}

function mouseMove(e) {
    var pos, i;

    if (!dragging) {
        return;
    }
    
    pos = getCursorPosition(e);

    x.push(pos.x);
    y.push(pos.y);

    ctx.strokeStyle = 'rgba(0, 0, 0, 0.2)';
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';
    ctx.lineWidth = 15;
    
    ctx.beginPath();
    ctx.moveTo(x[0], y[0]);
    
    for (i = 0; i < x.length; i++) {
        ctx.lineTo(x[i], y[i]);
    }
                
    ctx.stroke();
}

function getCursorPosition(e) {
    return {
        x: e.clientX - canvasPos.left,
        y: e.clientY - canvasPos.top
    };
}