JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div>
        <canvas id="myCanvas" width="300" height="300"></canvas>
    </div>
</div>

CSS

#container {
    text-align:center;
}
#myCanvas {
    background:#fff;
    border:1px solid #cbcbcb;
    text-align:center;
}

JavaScript

var context;
var dx= 4;
var dy=4;
var y=150;
var x=10;
function draw(){
    context= myCanvas.getContext('2d');
    context.clearRect(0,0,300,300);
    context.beginPath();
    context.arc(x,y,20,0,Math.PI*2,true);
    context.closePath();
    context.fill();
    if( x<0 || x>300){
        dx=-dx;
        context.fillStyle = getRandomColor();
    }
    if( y<0 || y>300){
        dy=-dy;
        context.fillStyle = getRandomColor();
    }
        x+=dx;
        y+=dy;

}
setInterval(draw,10); 


function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}