JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000; background-color: white;"> </canvas>

JavaScript

var can = document.getElementById('myCanvas');
						var ctx = can.getContext("2d");

						var center = {
						  x: can.width / 2,
						  y: can.height / 2
						};
						var minRad = 100;
						var maxRad = 250;

						var startAngle = toRad(290);
						var endAngle = toRad(310);

						drawAxis();
						drawSector();

						function drawSector() {
						  var p1 = {
						    x: maxRad * Math.cos(startAngle),
						    y: maxRad * Math.sin(startAngle)
						  }
						  p1 = toCanvasSpace(p1);

						  var p2 = {
						    x: minRad * Math.cos(startAngle),
						    y: minRad * Math.sin(startAngle)
						  }
						  p2 = toCanvasSpace(p2);

						  var p3 = {
						    x: minRad * Math.cos(endAngle),
						    y: minRad * Math.sin(endAngle)
						  }
						  p3 = toCanvasSpace(p3);
						  var p4 = {
						    x: maxRad * Math.cos(endAngle),
						    y: maxRad * Math.sin(endAngle)
						  }
						  p4 = toCanvasSpace(p4);

						  ctx.beginPath();
						  ctx.moveTo(p1.x, p1.y);
						  ctx.arc(center.x, center.y, maxRad, startAngle, endAngle);
						  ctx.lineTo(p3.x, p3.y);
						  ctx.arc(center.x, center.y, minRad, endAngle, startAngle, true);
						  ctx.closePath();

						  ctx.strokeStyle = "blue";
						  ctx.lineWidth = 2;
						  ctx.stroke();
						}


						function drawAxis() {
						  ctx.beginPath();
						  ctx.moveTo(can.width / 2, 0);
						  ctx.lineTo(can.width / 2, can.height);
						  ctx.stroke();
						  ctx.beginPath();
						  ctx.moveTo(0, can.height / 2);
						  ctx.lineTo(can.width, can.height / 2);
						  ctx.stroke();
						}

						function toRad(degrees) {
						  return degrees * Math.PI / 180;
						}

						function toCanvasSpace(p) {
						  var ret = {};
						  ret.x = p.x + can.width / 2;
						  ret.y = p.y + can.height / 2;
						  return ret;
						}