JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas1"></canvas>

<canvas id="canvas2"></canvas>

CSS

#canvas1,
#canvas2
{
    width: 200px;
    height:200px;
    border: 1px solid black;
}

JavaScript

document.getElementById("canvas1").addEventListener("mousemove", function(event){
    self = this;
    draw(event, self);
});

$("#canvas2").on("mousemove", function(event){
    self = this;
    draw(event, self);
});

function draw(ev, canvas){
    var x, y;
     if (ev.layerX || ev.layerX == 0) {
        x = ev.layerX;
        y = ev.layerY;
    } else if (ev.offsetX || ev.offsetX == 0) { 
        x = ev.offsetX;
        y = ev.offsetY;
    }
    
    var context = canvas.getContext('2d');
    
    console.log(ev, x, y);
    if (x === undefined || y === undefined) return;
    context.fillStyle = "rgb(0,255,255)";
    context.lineTo(x, y);
    context.stroke();
}