JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Mouse Positions Example</h3>
<canvas id="myCanvas"></canvas>

CSS

canvas{ border: 1px solid black; }

JavaScript

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "16px Arial";

canvas.addEventListener("mousemove", function(e) { 
    var cRect = canvas.getBoundingClientRect();              // Gets the CSS positions along with width/height
    var canvasX = Math.round(e.clientX - cRect.left);        // Subtract the 'left' of the canvas from the X/Y
    var canvasY = Math.round(e.clientY - cRect.top);         // positions to get make (0,0) the top left of the 
    ctx.clearRect(0, 0, canvas.width, canvas.height);        // canvas
    ctx.fillText("X: "+canvasX+", Y: "+canvasY, 10, 20);
});