JSFiddle - React, Tailwind, and code Playground

HTML

<script>
    var ball;
    var x = 100;
    var y = 200;
    var dx = 3;
    var dy = 3.5;
    var color = " #F7742C";

    function init() {
        ball = myCanvas.getContext('2d');
        setInterval(draw, 12);
        myCanvas.addEventListener('click', ev_click, false);
    }

    function draw() {
        ball.clearRect(0, 0, 600, 500);
        ball.beginPath();
        ball.fillStyle = color;
        // Draws a circle of radius 20 at the coordinates 100,100 on the canvas
        ball.arc(x, y, 10, 0, Math.PI * 2, true);
        ball.closePath();
        ball.fill();
        // Boundary Logic
        if (x < 10 || x > 590) dx = -dx;
        if (y < 10 || y > 490) dy = -dy;
        x += dx;
        y += dy;
    }
    
    function ev_click(e) {
        console.log(e.clientX+ " : " + e.clientY);
        console.log(x+  " : " + y);
        var inCircle= (e.clientX - x)*(e.clientX - x) + (e.clientY - y)*(e.clientY - y);
        console.log(inCircle);
        if ( inCircle< 2000) {
            color = " #000000";
        }
    }

</script>
<body onLoad="init();">
    <canvas id="myCanvas" width="600" height="500" style="border:10px solid"></canvas>

CSS

#myCanvas {
    background-color:#004685;
    position:absolute;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
}