JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="500" height="500"></canvas>
<div id="div"></div>

CSS

canvas{border:1px dotted black;}
#div{width:200px;height:200px;position:fixed;border:1px solid green;top:100px;left:100px;}

JavaScript

$(function() {
    var ctx=$('#canvas')[0].getContext('2d'); 
	rect = {};
	drag = false;

	$(document).on('mousedown','#canvas',function(e){
        rect.startX = e.pageX - $(this).offset().left;
        rect.startY = e.pageY - $(this).offset().top;
		rect.w=0;
		rect.h=0;
		drag = true;
	});

	$(document).on('mouseup',function(){
		drag = false;
	});

	$(document).on('mousemove',function(e){
		if (drag) {
			rect.w = (e.pageX - $("#canvas").offset().left)- rect.startX;
			rect.h = (e.pageY - $("#canvas").offset().top)- rect.startY;
            ctx.clearRect(0, 0, 500, 500);
            ctx.fillStyle = 'rgba(0,0,0,0.5)';
			ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);
		}
	});    
});