JSFiddle - React, Tailwind, and code Playground

by gamealchemist

HTML

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

JavaScript

var x = 90;
var y = 30;
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");

  cxt.fillStyle='#FFFFFF';
  cxt.fillRect(0, 0, WIDTH, HEIGHT);

function clear() {
  cxt.globalAlpha=0.3;
  cxt.fillStyle='#FFFFFF';
  cxt.fillRect(0, 0, WIDTH, HEIGHT);
  cxt.globalAlpha=1;
}

function init() {

  return setInterval(draw, speed);
}

function drawCircle(x,y,r) {

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

}

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

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

  x += dx;
  y += dy;
}

init();