JSFiddle - React, Tailwind, and code Playground

HTML

<html> <head><title>freedraw2</title></head> <body> </body> </html>

CSS

canvas {border-style:dotted; border-width:1;cursor:url(pencil.cur),auto;

JavaScript

var windowH = $(window).height();
var windowW = $(window).width();
var colorChoice = '#000000';
var canvasa = $('<canvas></canvas>').attr('id', 'canvasa');
canvasa.attr('class', 'canvas');
$('body').append(canvasa);
canvasa.attr('width', '500');
canvasa.attr('height', '375');
var canvasb = $('<canvas></canvas>').attr('id', 'canvasb');
canvasb.attr('class', 'canvas');
$('body').append(canvasb);
canvasb.width('500');
canvasb.height('375');
var somex = -1;
var somey = -1;
var isDown = false;
jQuery(document).ready(function() {
    $('.canvas').mousemove(function(e) {
        var can = $(this).offset();
        var a = e.pageX - can.left;
        var b = e.pageY - can.top;
        if (isDown) {
            canvas = document.getElementById($(this).attr('id'));
            context = canvas.getContext('2d');
            context.beginPath();
            context.moveTo(somex, somey);
            context.lineTo(a, b);
            context.strokeStyle = colorChoice;
            context.stroke();
            somex = a;
            somey = b;
        }
    });
    $('.canvas').mousedown(function(e) {
        isDown = true;
        var can = $(this).offset();
        somex = e.pageX - can.left;
        somey = e.pageY - can.top;
    });
    $(document).mouseup(function(e) {
        isDown = false;
    });
})