Il comando arc(xc,yc, r, u,v) traccia l'arco di cerchio di centro (xc,yc) e raggio r che, in verso orario, va (in radianti) da u a v. fillStyle sceglie il colore con cui riempire mediante fill() la figura chiusa tracciata in precedenza. Qui (con canvas) abbiamo riservato uno spazio maggiore per le immagini.
<canvas width=400 height=400></canvas>
<script>
c = document.querySelector("canvas").getContext("2d")
c.strokeStyle="brown"
c.beginPath()
c.moveTo(150,150); c.lineTo(290,150)
// centro=(150,150) raggio=140 da 0 a pi*3/2
c.arc(150,150, 140, 0,Math.PI*3/2)
c.lineTo(150,150)
c.fillStyle="cyan"; c.fill()
c.stroke()
c.beginPath()
c.moveTo(150,150); c.lineTo(150,10)
c.arc(150,150, 140, Math.PI*3/2,Math.PI*2); c.lineTo(150,150)
c.fillStyle="orange"; c.fill()
c.stroke()
c.beginPath(); c.arc(150,150, 70, 0,Math.PI*2); c.stroke()
</script>
=========
=========