JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="480" height="320"></canvas>

CSS

* {
            padding: 0;
            margin: 0;
        }

        canvas {
            background: #eee;
            display: block;
            margin: 0 auto;
        }

JavaScript

let canvas = document.getElementById('myCanvas');
    let ctx = canvas.getContext('2d');
    
    function drawBall (x, y) {
        ctx.beginPath();
        ctx.arc(x, y, 10, 0, Math.PI * 2);
        ctx.fillStyle = "#0095DD";
        ctx.fill();
        ctx.closePath();
    }

    function draw(x, y) {
        		
   	ctx.clearRect(0,0,canvas.width,canvas.height);
    
    drawBall(x, y);
    }
draw(canvas.height / 2 , canvas.width / 2);

    canvas.addEventListener('mousemove', function(e){
    	draw(e.pageX, e.pageY);
    
    });