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 contexts = [];
var draw = false;
var c = false;

function boot() {
    $('.can')
        .each(function(el) {
            id = this.id;
            contexts[id] = this.getContext('2d');
        })
        .mouseout(function() {
            c=false;
        })
        .mousedown(function(){
            draw = true;
        })
        .mouseup(function(){
            draw = false;
        })
        .mousemove(function(ev){
            //    console.log(act);
            var id = this.id,
                o = $(this).offset(),
                x = (ev.pageX - o.left),
                y = (ev.pageY - o.top);
            /*
            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 && contexts[id] != null) {
                if (!c) {
                    contexts[id].beginPath();
                    contexts[id].moveTo(x, y);
                    c = true;
                } else {
                    contexts[id].lineTo(x, y);
                    contexts[id].stroke();
                }
            }
        });
}

$(document).ready(boot);