JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="bg" width="800" height="800"></canvas>

JavaScript

var bg = document.getElementById('bg');
var ctx = bg.getContext('2d');
var circ = Math.PI * 2;
var quart = Math.PI / 2;
var imd = null;
var circ = Math.PI * 2;
var quart = Math.PI / 2;

ctx.beginPath();
ctx.strokeStyle = '#99CC33';
ctx.lineCap = 'square';
ctx.closePath();
ctx.fill();
ctx.lineWidth = 10;

imd = ctx.getImageData(0, 0, 240, 240);
function draw(current){
     ctx.putImageData(imd, 0, 0);
    ctx.beginPath();
   ctx.arc(120, 120, 70, 0,  2 * Math.PI, false);
    ctx.stroke();
}
//draw(0.6);
var t=0;
var timer=null;
function loadCanvas(now){
  timer =  setInterval(function(){
      if(t>now){
          clearInterval(timer);
      }else{
          draw(t);
          t+=0.01;
      }
    },20);
}
loadCanvas(0.8);
timer=null;