JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width="500" height="500" class="canvas" id="canvs"></canvas> <br/><br/>

CSS

.canvas{
    width:500px;
    height:500px;
    background-color:white;
    border:1px solid black;
}

JavaScript

var canvas = document.getElementById('canvs'),
    ctx = canvas.getContext("2d"),
    now = new Date().getTime(),
    i = new Object();
    i.currentAngle = 0;
    i.rotationSpeed = 1.6;
    i.x = 0;
    i.y = 0;
    i.radius = 100;
    i.start = 0;
    i.factor = 80; 



function update_zoom(){
     i.factor = this.value;   
}

function update(deltaTime){
    var centerX = canvas.width/2;
    var centerY = canvas.height/2;
        i.currentAngle = (i.currentAngle || 0) + (deltaTime/1000 * i.rotationSpeed);
    
    if(i.currentAngle>2*Math.PI){
        i.currentAngle-=2*Math.PI;
    }
		i.x = centerX + (i.radius*i.factor) * Math.cos(i.currentAngle);
		i.y = centerY + (i.radius*i.factor) * Math.sin(i.currentAngle);  
}


function draw(){
    //clear canvas
        ctx.clearRect ( 0 , 0 , canvas.width , canvas.height );	
    //draw center
    ctx.beginPath();
    var x = (canvas.width/2) - 5;
    var y = (canvas.height/2) - 5;
        ctx.rect(x,y,11,11);
        ctx.fillStyle="blue"
        ctx.fill();
    
    //get position of the blue dot
    var deltaTime = new Date().getTime() - i.start;
		i.start += deltaTime;
        update(deltaTime);
    
    //draw blue dat
	ctx.beginPath();
	ctx.arc(i.x, i.y, i.radius*i.factor, 0, 2 * Math.PI, false);
	ctx.lineWidth = 3;
	ctx.strokeStyle = 'rgba(0,192,255,1)';
	ctx.stroke();	
   
	ctx.beginPath();
    ctx.rect(canvas.width/2,canvas.height/2,1,1);
    ctx.fillStyle="red"
    ctx.fill();
    
    requestAnimationFrame(draw);
					

}

draw();