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;

drawImage();

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

function drawImage() {
    var img = new Image();
    img.src = 'http://img2.timeinc.net/health/img/web/2013/03/slides/cat-allergies-400x400.jpg';
    
    img.onload = function () {
        ctx.drawImage(img, 0, 0);
    };
}

var lastPos = null;

function mouseDown(e) {
    var pos = getCursorPosition(e);
                
    dragging = true;
    
    lastPos = pos;
}
            
function mouseUp(e) {
    dragging = false;
    
}

function mouseMove(e) {
    var pos, i;

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

    if (lastPos) {
        ctx.strokeStyle = 'rgba(0, 100, 0, 0.25)';
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';
        ctx.lineWidth = 15;
        ctx.beginPath();
        ctx.moveTo(lastPos.x, lastPos.y);
        ctx.lineTo(pos.x, pos.y);
        ctx.stroke();
    }
    
    lastPos = pos;
}

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