JSFiddle - React, Tailwind, and code Playground

by djwelsh

HTML

<canvas id="the-canvas" width="600" height="400"></canvas>

JavaScript

let inc = 0;
let incMax = 314;
let animating = true;

function draw() {
	
  let canvas = document.getElementById('the-canvas');
  let ctx = canvas.getContext('2d');
  
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  ctx.fillStyle = "red";
  ctx.strokeStyle = "blue";
  
  ctx.save();
  
  ctx.setLineDash([inc, 314]);
  
  ctx.beginPath();
  
    ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 外の円
    
  ctx.stroke();
  
  ctx.restore();
  
 	if (animating) {

    if (inc > incMax) {
      
      animating = false;
      
      setTimeout(function () {
        setTimeout(function () {
          inc = 0;
          animating = true;
          
          requestAnimationFrame(draw);
        }, 500)
      }, 1000);
    }
    else {
      inc++;
    }
  

  	requestAnimationFrame(draw);
  }
}


$(function () {
	
  draw();
  
	
});