JSFiddle - React, Tailwind, and code Playground

by Abhay Singh

HTML

<canvas id="canvas"></canvas>

JavaScript

var ctx=document.getElementById("canvas").getContext("2d");
var radius=100;
for(var i=0;i<8;i++){
    ctx.beginPath();
    ctx.fillStyle='rgb(' + Math.floor(255-42.5*i) + ', 95, 180)';
    ctx.moveTo(300,300); //We have to add this, otherwise, it will fill the minimum area needed to fill the arc

    ctx.arc(300,300,radius,i*Math.PI/4,(i+1)*((Math.PI/4)),false); 
    ctx.closePath();
    ctx.fill();
}