JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <title>aj</title>
</head>
<body>
    <div id="x"></div>
    <div id="y"></div>
    <canvas id="c"></canvas>

    </canvas>
</body>
</html>

CSS

*
        {
            margin: 0;
            padding: 0;
        }
        
        html, body
        {
            width: 100%;
            height: 100%;
        }
        
        #x
        {
            position: absolute;
            top: 0px;
            left: 0px;
        }
        
        #y
        {
            position: absolute;
            top: 0px;
            left: 40px;
        }

JavaScript

var started = false;

        $(function () {

            var c = document.getElementById('c');

            c.width = $(document).width();
            c.height = $(document).height();

            var c = c.getContext('2d');

            $('#c').mousemove(function (e) {

                var x, y;

                x = e.pageX - this.offsetLeft;
                y = e.pageY - this.offsetTop;

                $('#x').html(x);
                $('#y').html(y);

            });
        });