JSFiddle - React, Tailwind, and code Playground

HTML

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

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=180-angle/2;

		const points=[
			[
				radius*Math.sin(-angle*Math.PI/180)+x,
				radius*Math.cos(-angle*Math.PI/180)+y,
			],
			[
				radius*Math.sin(angle*Math.PI/180)+x,
				radius*Math.cos(angle*Math.PI/180)+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.beginPath();
		ctx.fillStyle='#F00';
		ctx.strokeStyle='#F00';
		ctx.moveTo(x,y);
		//ctx.lineTo(points[0][0],points[0][1]);
		ctx.arcTo(
			points[0][0],
			points[0][1],
			points[1][0],
			points[1][1],
			radius
		);
		//ctx.lineTo(x,y);
		ctx.stroke();
		ctx.fill();


		return this;
	}
}

const circle=new Circle(document.getElementById('canvas'));
circle.getCanvas().getContext('2d').fillStyle='#F5F5F5';
circle.draw().drawSection(45);