JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas1" width="500" height="500"></canvas>

JavaScript

(function() {
  var annulus = function(centerX, centerY,
    innerRadius, outerRadius,
    startAngle, endAngle,
    anticlockwise) {
    var th1 = startAngle * Math.PI / 180;
    var th2 = endAngle * Math.PI / 180;
    var startOfOuterArcX = outerRadius * Math.cos(th2) + centerX;
    var startOfOuterArcY = outerRadius * Math.sin(th2) + centerY;

    this.beginPath();
    this.arc(centerX, centerY, innerRadius, th1, th2, anticlockwise);
    this.lineTo(startOfOuterArcX, startOfOuterArcY);
    this.arc(centerX, centerY, outerRadius, th2, th1, !anticlockwise);
    this.closePath();
  }
  CanvasRenderingContext2D.prototype.annulus = annulus;
})();

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

ctx.annulus(200, 200, 20, 80, 0, 360);
ctx.stroke();

ctx.annulus(200, 200, 20, 80, 15, 75);
ctx.fillStyle = 'red';
ctx.fill();

ctx.annulus(200, 200, 20, 80, 75, 135);
ctx.fillStyle = 'green';
ctx.fill();

ctx.annulus(200, 200, 20, 80, -120, -60);
ctx.fillStyle = 'blue';
ctx.fill();

var nSegs = 200;
for(i=0; i<nSegs; i++){
  ctx.annulus(200, 200, 100, 250 - (i*150/nSegs), i*(360/nSegs), (i+1)*(360/nSegs)+1);
  var greyVal = Math.floor((i*255)/nSegs);
  ctx.fillStyle = "rgb("+greyVal+","+greyVal+","+greyVal+")";
  ctx.fill();
}