JSFiddle - React, Tailwind, and code Playground

HTML

<canvas class="can" id="c1" width="200" height="200"></canvas>
<canvas class="can" id="c2" width="200" height="200"></canvas>
<canvas class="can" id="c3" width="200" height="200"></canvas>

CSS

.can {border: 1px solid blue; display:block; float:left; margin:0;}

JavaScript

var act = null;
var context = null;
var draw = false;
var c = false;

function boot() {
    $('.can')
        .mouseenter(function(){
            act = this;
            context = act.getContext('2d');
           // console.log(this);

        })
        .mouseleave(function(){
            act = null;
            context = null;
       //     console.log('out');
        })
        .mousedown(function(){
            draw = true;
        })
        .mouseup(function(){
            draw = false;
        })
        .mousemove(function(ev){

        //    console.log(act);
              if (ev.layerX || ev.layerX == 0) { // Firefox
                x = ev.layerX;
                y = ev.layerY;
              } else if (ev.offsetX || ev.offsetX == 0) { // Opera
                x = ev.offsetX;
                y = ev.offsetY;
              }

            if(draw && context != null)
              if (!c) {
                context.beginPath();
                context.moveTo(x, y);
                c = true;
              } else {
                context.lineTo(x, y);
                context.stroke();
              }
        });
}

$(document).ready(boot);