JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="400" height="400">

CSS

canvas{background:#F5F5F5}

JavaScript

class Circle{
	/**
	 * @param {Canvas} canvas
	 */
	constructor(canvas){
		this.canvas=canvas;
		this.radius=canvas.width/2*0.8;
	}

	/**
	 * @return {Canvas}
	 */
	getCanvas(){
		return this.canvas;
	}

	/**
	 * @param {number} radius
	 * @return {Circle}
	 */
	setRadius(radius){
		this.radius=radius;

		return this;
	}

	/**
	 * @return {number}
	 */
	getRadius(){
		return this.radius;
	}

	/**
	 * @return {Circle}
	 */
	draw(){
		const cnv=this.getCanvas();
		const ctx=cnv.getContext('2d');
		const center=[
        	cnv.width/2,
          	cnv.height/2
        ];

		ctx.beginPath();
		ctx.arc(
			center[0],
			center[1],
			this.getRadius(),
			0,
			2*Math.PI
		);
		ctx.stroke();
		ctx.fill();


		return this;
	}

	/**
	 * @param {number} angle
	 * @return {Circle}
	 */
	drawSection(angle){
		const cnv=this.getCanvas();
		const ctx=cnv.getContext('2d');
		const center=[
        	cnv.width/2,
          	cnv.height/2
        ];

		const radius=this.getRadius();
		const x=center[0];
		const y=center[1];

		angle=(angle%360)/2;
		const radian=(180-angle)*Math.PI/180;

		const points=[
			[
				radius*Math.sin(-radian)+x,
				radius*Math.cos(-radian)+y,
			],
			[
				radius*Math.sin(radian)+x,
				radius*Math.cos(radian)+y,
			]
		];

		ctx.beginPath();
		ctx.moveTo(points[0][0],points[0][1]);
		ctx.lineTo(x,y);
		ctx.lineTo(points[1][0],points[1][1]);
		ctx.stroke();
    
		//Заливка
    ctx.save();
		ctx.beginPath();
		ctx.fillStyle='#F00';
		ctx.strokeStyle='#F00';
		ctx.moveTo(x,y);
		ctx.lineTo(points[0][0],points[0][1]);
		ctx.arc(
			x,
			y,
      radius,
			(270-angle)*Math.PI/180,
			(angle-90)*Math.PI/180
		);
		ctx.lineTo(x,y);
		ctx.stroke();
		ctx.fill();
    ctx.restore();


		return this;
	}
}

const circle=new Circle(document.getElementById('canvas'));
const ctx=circle.getCanvas().getContext('2d');

let angle=0;
const framesPerSecond=60;
const step=30/framesPerSecond;

setTimeout(function run(){
  ctx.clearRect(0,0,canvas.width,canvas.height);
 ...