JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="240" height="240"></canvas>

JavaScript

var x = 0;
var y = 0;
var r = 10;
var dx = 4;
var dy = 8;
var WIDTH = 240;
var HEIGHT = 240; 
var speed = 60;

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");


function clear() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
}

function init() {
  window.requestAnimationFrame(init, cxt)
  draw();  
}

function drawCircle(x,y,r) {
cxt.clearRect(0, 0, 240, 240);
cxt.beginPath();
cxt.arc(x, y, r, 0, Math.PI * 2, false);
cxt.closePath();
cxt.fillStyle = "#006699";
cxt.fill();

}

function draw(){
drawCircle(x, y, r);

 if (x + dx > WIDTH || x + dx < 0)
    dx = -dx;
  if (y + dy > HEIGHT || y + dy < 0)
    dy = -dy;

  x += dx;
  y += dy;
}

init();