JSFiddle - React, Tailwind, and code Playground

by agrilo

HTML

<canvas id="canvas" width=300 height=300></canvas>

CSS

#canvas{
  margin: 0 auto; 
  
  transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
  }

JavaScript 1.7

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const size = 300;
const halfCircle = size / 2;
let startPercentange = 0;
const endPercentage = 100;
var ringThinkness = 20;
var values = [{color: 'red', size: 35}, {color: 'black', size: 30}, {color: 'blue', size: 35}];

window.requestAnimationFrame(animate);

function animate(){
    drawPieChart(ctx);
    startPercentange+=1;

    if (startPercentange <= endPercentage) {
  		window.requestAnimationFrame(animate); 
    }
}

function drawPieChart(ctx) {
  let startAngle = 0;

  for(const slice of values) {
     const sliceAngle = (2 * Math.PI * slice.size) / 100 * startPercentange / 100;
     drawPieSlice(
        ctx,
        startAngle,
        startAngle + sliceAngle,
        halfCircle,
        slice.color
      );
      startAngle = startAngle + sliceAngle;
  }
  
   drawPieSlice(
        ctx,
        0,
        360,
        halfCircle - ringThinkness,
        'white'
      );
  
}

function drawPieSlice (ctx, start, slice, radius, color) { 
	ctx.fillStyle = color;
  ctx.beginPath();
  ctx.moveTo(halfCircle, halfCircle);
  ctx.arc(halfCircle, halfCircle, radius, start, slice);
  ctx.fill();
  ctx.closePath();
}