JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="400" height="400" style='border:1px solid;'></canvas>

JavaScript

var context = document.getElementById('canvas').getContext('2d');
var x=100, y=100, a=28, b=-16, r=10;
setInterval(draw,40);
function draw() {
  x += a;
  y += b;
  b += 0.2;
  a *= 0.995;
  b *= 0.995;
  if (x<r) x=2*r-x, a=-a*0.7;
  if (x>canvas.width-r) x=2*(canvas.width-r)-x, a=-a*0.7;
  if (y<r) y=2*r-y, b=-b*0.7;
  if (y>canvas.height-r) y=2*(canvas.height-r)-y, b=-b*0.7;
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.beginPath();
  context.arc(x, y, r, 0, 2*Math.PI);
  context.stroke();
}