JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas"></canvas>

CSS

canvas{
  background:#fff;
}

JavaScript

var ctx = document.getElementById("myCanvas").getContext("2d");
  var rectList = [
  		{x:50,  y:50, w:50, h:50},
  		{x:150, y:50, w:50, h:50},
  		{x:120, y:5,  w:20, h:30},
  		{x:178, y:80, w:80, h:30},
  ];

	function isPinR(_p, _r){
			if (_p.x < _r.x) return false;
			if (_p.y < _r.y) return false;
			if (_p.x > _r.x + _r.w) return false;
			if (_p.y > _r.y + _r.h) return false;
  		return true;
	}
  
	function drawRect(_r, _c){
			ctx.beginPath();
			ctx.moveTo(_r.x , _r.y);
			ctx.lineTo(_r.x , _r.y + _r.h);
			ctx.lineTo(_r.x + _r.w , _r.y + _r.h);
			ctx.lineTo(_r.x + _r.w , _r.y);
			ctx.lineTo(_r.x , _r.y);
			ctx.fillStyle = _c;
		  ctx.fill();
	}

	ctx.canvas.addEventListener("mousemove", function(e){
   		var cursor = {x:e.offsetX, y:e.offsetY};
   
   		for(var ind = 0, ln = rectList.length, col = "#ddd"; ind < ln; ind++){
          if (isPinR(cursor, rectList[ind])) 
			  			col = "#f00";
    			else
			  			col = "#ddd";
          
          drawRect(rectList[ind], col);
      }

	});
  
  for(var ind = 0, ln = rectList.length; ind < ln; ind++)
      drawRect(rectList[ind], "#ddd");