JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="500" height="310"></canvas>

JavaScript

var x = 10;
var y = 10;
var r = 2;
var vx = 300;
var vy = 150;
var WIDTH = 500;
var HEIGHT = 310; 
var speed = 20;
var lastTime = 0;
var dTime = 0;
var nowTime = 0;
var ti=null;

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


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

function get_random_color() {
    //return "#"+((1<<24)*Math.random()|0).toString(16);
    return "#ff0000";
}


function init() {
  lastTime = new Date().getTime();
  //return setInterval(draw, speed);
    //draw();
    timerrrr()
}

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


cxt.fill();

}

function timerrrr() {
    if (ti) {
        clearTimeout(ti);
    }
    setTimeout(draw,1);
    ti=setTimeout(timerrrr,speed);
}

function draw(){
    nowTime = new Date().getTime();
    dTime = (nowTime - lastTime)/1000;
    lastTime = nowTime;
    //console.log(dTime);

    x += vx*dTime;
    y += vy*dTime;
    
    if (x >= WIDTH){
        x = WIDTH;
        vx = -vx;
    }else if (x <= 0){
        x = 0;
        vx = -vx;
    }

    if (y > HEIGHT){
        y = HEIGHT;
        vy = -vy;
    }else if (y < 0){
        y = 0;
        vy = -vy;
    }

    
    drawCircle(x, y, r);
}

init();