JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var canvas = document.getElementById('canvas');
    if (canvas.getContext){
      canvas.addEventListener('mousemove', function(e) {
      var pos = getMousePos(canvas, e), /// provide this canvas and event
          x = pos.x,
          y = pos.y;

      /// check x and y against the grid
      }, false);

    }

function getMousePos(canvas, e) {
    var rect = canvas.getBoundingClientRect();
    var ctx = canvas.getContext('2d');
    ctx.fillRect(e.clientX - rect.left,e.clientY - rect.top,100,100);
    
		console.log( {x: e.clientX - rect.left, y: e.clientY - rect.top})
    
    return {x: e.clientX - rect.left, y: e.clientY - rect.top};
}