JSFiddle - React, Tailwind, and code Playground

by vaibhav saxena

HTML

<canvas id="can" width="400" height="400"
style="background-color:black">

JavaScript

var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");
var lastend = 0;
var data = [60, 0]; // If you add more data values make sure you add more colors
var myTotal = 0; // Automatically calculated so don't touch
var myColor = ['black', 'green']; // Colors of each slice

/* for (var e = 0; e < data.length; e++) {
  myTotal += data[e];
} */

setInterval(()=>{

if(data[0]>59){
data = [60, 0];
}
console.log( 'p' + data);

data[0] = data[0] - 1;
data[1] = data[1] + 1;
console.log( 'n' + data);

myTotal = data[0]+ data[1];
console.log(data);

for (var i = 0; i < data.length; i++) {
  ctx.fillStyle = myColor[i];
  ctx.beginPath();
  ctx.moveTo(canvas.width / 2, canvas.height / 2);
  // Arc Parameters: x, y, radius, startingAngle (radians), endingAngle (radians), antiClockwise (boolean)
  ctx.arc(canvas.width / 2, canvas.height / 2, canvas.height / 2, lastend, lastend + (Math.PI * 2 * (data[i] / myTotal)));
  ctx.lineTo(canvas.width / 2, canvas.height / 2);
  ctx.fill();
  lastend += Math.PI * 2 * (data[i] / myTotal);
  console.log(lastend);
}

}, 1000)