JSFiddle - React, Tailwind, and code Playground

by Jun Dolor

HTML

<body onload="init();">
	<canvas id="myCanvas" width="600" height="400"></canvas>
</body>

CSS

canvas {
  border: 1px solid #000;
}

JavaScript

var c, ctx;
var arcLength = 0.0625;
var startAngle = 0;
var endAngle = arcLength;

function init() {
  c = document.querySelector("#myCanvas");
  ctx = c.getContext("2d");
  ctx.strokeStyle = "red";

  draw();
}

function draw() {

  setInterval(function() {
    //redraw the canvas
    ctx.fillStyle = "yellow";
    ctx.fillRect(0, 0, c.width, c.height);

    if (endAngle >= 2) {
      //reset
      startAngle = 0;
      endAngle = arcLength;
    } else {
      //start where the last angle ended
      startAngle = endAngle;
      endAngle += arcLength;
    }

    ctx.beginPath();
    ctx.arc(300, 200, 100, startAngle * Math.PI, endAngle * Math.PI);
    ctx.stroke();

  }, 100);

}