JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="overlay"></canvas>

CSS

html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
#overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 5;
	border: 1px #AFFF00 dashed;
}

JavaScript

var canvas = document.getElementById('overlay');
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
var ctx = canvas.getContext('2d');
ctx.strokeStyle = '#ff0000';

var a = {
	x: 0,
	y: 0
};
canvas.addEventListener('mousemove', function(e){ 
			a.x = e.x; 
			a.y = e.y; 	
});

var tick = function () {
	requestAnimationFrame(tick);

	canvas.width = canvas.width;
    ctx.fillStyle = "red";
    var x = Math.floor( a.x / canvas.width * 100 ); 
	var y = Math.floor( a.y / canvas.height * 100 );
	ctx.fillText("Mouse : " + x + "% | " + y + "%", 50,50);
	ctx.strokeStyle="red";
	ctx.rect(x,y,x+10, y+ 10)
	ctx.stroke();
}
tick();