JSFiddle - React, Tailwind, and code Playground

by Zevan

HTML

<script>
    var mouseX = 0, mouseY = 0;
    var canvas, $canvas, c;
    $(function(){
       
        $canvas = $("canvas")
        canvas = $canvas[0];
        c = canvas.getContext("2d");
        
        c.fillStyle = "black";
        c.fillRect(0, 0, canvas.width, canvas.height);
        
        $(document).mousemove(function(e) {
            var offset = $canvas.offset();
            mouseX = e.pageX - offset.left;
            mouseY = e.pageY - offset.top;
        });
        setInterval(draw, 30);
    });
</script>
<canvas id="canvas" width="200" height="200"></canvas>
<p>Move Mouse</p>

CSS

body,html{
   
    background-color : #333;
    color : white;
    font-family : sans-serif;
    font-size : 12px;
}

JavaScript

function draw(){
   c.fillStyle = "hsla(" + mouseX + ", 100%, " + mouseY/2 + "%, 0.2)";
   c.fillRect(mouseX - 10, mouseY - 10, 20, 20);
}