JSFiddle - React, Tailwind, and code Playground

by jkozla01

HTML

<script>
    var ball;
    var x = 100;
    var y = 200;
    var dx = 2;
    var dy = 2;
    var color = " #F7742C";
    var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';

    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, 30, 0, Math.PI * 2, true);
        ball.closePath();
        ball.fill();
        // Boundary Logic
        if (x < 30 || x > 570) dx = -dx;
        if (y < 30 || y > 470) 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 = hue;
        }
    }
</script>
<body onLoad="init();">
    <canvas id="myCanvas" width="600" height="500" style="border:10px solid"></canvas>
    
    
    
<a href="javascript:location.reload(true)">Refresh this page</a>

CSS

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