Arc and Pie - Canvas

Two pie slices are built from arc plus closePath geometry: a teal wedge fills first, then a second wedge fills with a different color in a separate path.

Program

arc adds a circular sweep to the current path. closePath connects the cursor back to the start point so fill paints a closed wedge.

arc_and_pie.html

<canvas id="stage" width="360" height="210"></canvas>
<script>
  const ctx = stage.getContext("2d");
  ctx.fillStyle = "#14b8a6";
  ctx.beginPath();
  ctx.moveTo(180, 105);
  ctx.arc(180, 105, 80, 0, Math.PI * 0.6);
  ctx.closePath();
  ctx.fill();
  ctx.fillStyle = "#f97316";
  ctx.beginPath();
  ctx.moveTo(180, 105);
  ctx.arc(180, 105, 80, Math.PI * 0.6, Math.PI * 1.1);
  ctx.closePath();
  ctx.fill();
</script>

arc arc adds a circular sweep to the current path between two angles.

closePath closePath connects the path cursor back to the path origin so fill produces a closed shape.