JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="main">
		<canvas id="canvas_main">
		</canvas>
    </div>
  </body>

CSS

#main 
{ 
	position: relative;
	width:400px;
	height:300px;
}

#canvas_main
{ 
	border: 1px solid #000; 
	width:400px;
	height:300px;
}

#canvas_temp 
{ 
	position: absolute; 
	top: 1px; 
	left: 1px; 
	width:400px;
	height:300px;
}

JavaScript

var canvas_temp, context_temp, canvas, context;
var container;
var started = false;

$(document).ready(function() {

	container =  $('#main');
	
	canvas = document.getElementById('canvas_main');
	context = canvas.getContext('2d');
	
	init();
	
	canvas_temp = document.getElementById('canvas_temp');
	context_temp = canvas_temp.getContext('2d');

	container.mousedown(function(e) {
	
		var parentOffset = $(this).offset(); 
		var x = e.pageX - parentOffset.left;
		var y = e.pageY - parentOffset.top;
        
        context_temp.beginPath();
        context_temp.moveTo(x, y);
        started = true;
	});
	
	container.mousemove(function(e) {
	
		var parentOffset = $(this).offset(); 
		var x = e.pageX - parentOffset.left;
		var y = e.pageY - parentOffset.top;
            
        if (started) {
            context_temp.lineTo(x, y);
            context_temp.stroke();
	    }
	});
	
	container.mouseup(function(e) {
	
		var parentOffset = $(this).offset(); 
		var x = e.pageX - parentOffset.left;
		var y = e.pageY - parentOffset.top;
        
        if (started) {
            container.mousemove(x, y);
            started = false;
            update();
	    }
	});
});

function init() {
	jQuery('<canvas/>', {
		id: 'canvas_temp'
	}).appendTo(container);
}

function update () {
	context.drawImage(canvas_temp, 0, 0);
	context_temp.clearRect(0, 0, canvas_temp.width, canvas_temp.height);
}