JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="can1" width="200" height="200"></canvas>
<canvas id="can2" width="200" height="200"></canvas>

CSS

canvas{
    display:block;
    float:left;
    border:solid 1px #000;
    margin:10px;
}

JavaScript

function Animate(id, useTime){
    var can = document.getElementById(id),
        ctx = can.getContext('2d'),
        wid = can.width,
        hei = can.height,
        lst = Date.now(),
        rps = 2*Math.PI,
        step = rps/60,
        ang = 0;
    
    (function draw(){
        var dif = Date.now() - lst;
        lst = Date.now();
        if (useTime) step = rps * dif/1000;
        
        ang += step;
        
        ctx.clearRect(0,0,wid,hei);
        ctx.beginPath();
        ctx.arc(wid/2 + Math.cos(ang)*50, hei/2 + Math.sin(ang)*50, 10, 0, 2*Math.PI);
        ctx.fill();
        
        requestAnimationFrame(draw);
    })();
}

Animate('can1', false);
Animate('can2', true);