JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<canvas id="paintCanvas"></canvas>
</body>

CSS

canvas {
    background-color: #CECECE;
}

html, body {
    background-color: #FFFFFF;
}

JavaScript

$(document).ready(function () {
	    var paintCanvas = document.getElementById("paintCanvas");
	    var paintCtx = paintCanvas.getContext("2d");
	    
	    var size = 500;

	    paintCanvas.width = size;
	    paintCanvas.height = size;

	    var draw = false;
	    var prevMouseX = 0;
	    var prevMouseY = 0;

	    function getMousePos(canvas, evt) {

		    evt = evt.originalEvent || window.event || evt;
		    var rect = canvas.getBoundingClientRect();


		    if (evt.clientX !== undefined && evt.clientY !== undefined) {
		        return {
		            x: evt.clientX - rect.left,
		            y: evt.clientY - rect.top
		        };   
		    }
		} 





	    $("#paintCanvas").on("mousedown", function(e) {
	    	draw = true;
	    	var coords = getMousePos(paintCanvas);
	    	prevMouseX = coords.x;
	    	prevMouseY = coords.y;
	    });

	    $("#paintCanvas").on("mousemove", function(e) {
	    	if(draw) {
	    		var coords = getMousePos(paintCanvas, e);

		        paintCtx.beginPath();
		        paintCtx.lineWidth = 10;
		        paintCtx.strokeStyle = "#000000";
		        paintCtx.moveTo(prevMouseX, prevMouseY);
		        paintCtx.lineTo(coords.x, coords.y);
		        paintCtx.stroke();

		        prevMouseX = coords.x;
		        prevMouseY = coords.y;
	    	}
	    });

	    $("#paintCanvas").on("mouseup", function(e) {
	    	draw = false;
	    });


	});