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;
    if( y<0 || y>300)
        dy=-dy;
        x+=dx;
        y+=dy;
    }
setInterval(draw,10);