JSFiddle - React, Tailwind, and code Playground

HTML

<canvas></canvas>
<div></div>

CSS

canvas {
    width: 128px;
    height: 128px;
    margin: 8px;
    background: #09f;
}
div {
    margin-left: 8px;
}

JavaScript

$('canvas').mousemove(function(event) {
    var offset = $(this).offset();
    offset.left = Math.floor(offset.left);
    offset.top = Math.floor(offset.top);
    
    mouse = { x: event.pageX - offset.left, y: event.pageY - offset.top };
    
    $('div').html('x: ' + mouse.x + ', y: ' + mouse.y);
});