JSFiddle - React, Tailwind, and code Playground

HTML

<header>Canvas Demo</header>
<body>
texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    texttexttexttexttexttexttexttext
<canvas id="canvasOne" widht="300" height="300" style="border:1px solid black"></canvas><br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>

JavaScript

var canvas = document.getElementById("canvasOne");
context = canvas.getContext("2d");
canvas.addEventListener("mousemove", mouseMoved);
context.fillText("Put mouse here", 10, 10);

function mouseMoved(e) {
    context.clearRect(0, 0, canvas.width, canvas.height);
    
    context.fillText(["From upper left:",
                      e.clientX - (canvas.offsetLeft - window.pageXOffset),
                      e.clientY - (canvas.offsetTop - window.pageYOffset)],
                     10,
                     10);
    
     context.fillText(["From upper right:",
                     canvas.width - (e.clientX - canvas.offsetLeft) - window.pageXOffset,
                     e.clientY - (canvas.offsetTop - window.pageYOffset)],
                     10,
                     30);
}