JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" height="300" width="300" style="border:1px dotted #111;"/>

JavaScript

var x=150;
var y=150;
var dx=2;
var dy=4;
var WIDTH;
var HEIGHT;

var ctx=document.getElementById("canvas").getContext("2d");
ctx.beginPath();
ctx.arc(150,150,10,0,2*Math.PI,true);
ctx.closePath();
ctx.fill();
 
function init()
{
  var ctx=document.getElementById("canvas").getContext("2d");
 
  return interval = setInterval(draw,10);
}
function draw(){
  ctx.clearRect(0,0,300,300);
ctx.beginPath();
ctx.arc(x,y,10,0,2*Math.PI,true);
ctx.closePath();
ctx.fill();
  x+=dx;
  y+=dy;
  bounce();
}
function bounce(){
  if(x+dx>300||x+dx<0)
    dx=-dx;
    y++;
    if(y>=300)
    {
        x-=dx;
    y=150;
        clearInterval(interval);
}
  if(y+dy>300||y+dy<0)
    dy=-dy;
    dy++;
}
init();