JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="600" height="600"></canvas>

CSS

#canvas{
    border: 1px solid red;
    background-color:black;
}

JavaScript

var el = document.getElementById('canvas'),
    ctx = el.getContext('2d');

el.offsetX = el.width/2;
el.offsetY = el.height/2;

el.addEventListener('mousedown',function(e){test(e,this);},false);

var box = {};
    box.x = 50;
    box.y = 50; 

function test(e,parent){
     	if(e.button == 0){
				clearInterval(parent.scroll);
					parent.scroll		= setInterval(update, 10);
			
				function update(){
					console.log('test');
			}   
        }	
}
           
           
function draw(){	
    	ctx.clearRect(0,0,el.width,el.height);
           
           
    var x = box.x - el.offsetX,
        y = box.y - el.offsetY;
         
        ctx.beginPath();
        ctx.rect(50, 50, x, y);
        ctx.fillStyle = 'red';
        ctx.fill(); 
    
    setTimeout(draw,1);
}


draw();