JSFiddle - React, Tailwind, and code Playground

by cat_991

HTML

<canvas id="myCanvas" width="600" height="600" style="border:1px
  solid #000000;"></canvas>

JavaScript

var mouseX, mouseY
function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  mouseX = evt.clientX - rect.left - (canvas.width/2);
  mouseY = (canvas.height)-evt.clientY - rect.top - 32);
}
canvas.addEventListener('mousemove', function(evt) {
  var mousePos = getMousePos(canvas, evt);}, false)