Méthode : CanvasRenderingContext2D.arc()

<canvas id="myCanvas" width="350" height="300" style="background-color:#fff"></canvas>
<script type="text/javascript">
 var myCanvas=document.getElementById("myCanvas");
 var myContext=myCanvas.getContext("2d");

 /* Tracé du centre */
 myContext.lineWidth="1";
 myContext.beginPath();
 myContext.moveTo(0,150);
 myContext.lineTo(300,150);
 myContext.stroke();
 myContext.beginPath();
 myContext.moveTo(150,0);
 myContext.lineTo(150,300);
 myContext.stroke();

 myContext.lineWidth="2";
 myContext.font="bold 15px arial";

 /* Cercle complet bleu */
 myContext.beginPath();
 myContext.strokeStyle="#316AC5";
 myContext.fillStyle=myContext.strokeStyle;
 myContext.arc(150, 150, 130, 0 , 2*Math.PI);
 myContext.stroke();
 myContext.fillText("0 = 2PI", 150+130+4, 150-3);

 /* Ajout de la flèche de sens avec un peu de trigonométrie */
 myContext.beginPath();
 myContext.moveTo(150+130*Math.cos(Math.PI/4)+10, 150+130*Math.sin(Math.PI/4));
 myContext.lineTo(150+130*Math.cos(Math.PI/4), 150+130*Math.sin(Math.PI/4))
 myContext.moveTo(150+130*Math.cos(Math.PI/4), 150+130*Math.sin(Math.PI/4)-10);
 myContext.lineTo(150+130*Math.cos(Math.PI/4), 150+130*Math.sin(Math.PI/4))
 myContext.stroke();  


 /* Arc de cercle rouge entre 0 et PI/2 */
 myContext.beginPath();
 myContext.strokeStyle="#ff0000";
 myContext.fillStyle=myContext.strokeStyle;
 myContext.arc(150, 150, 110, 0 , Math.PI/2);
 myContext.stroke();
 myContext.fillText("PI/2", 150+110*Math.cos(Math.PI/2)-30, 150+110*Math.sin(Math.PI/2)+5);


 /* Arc de cercle orange entre PI/8 et 3PI/2 */
 myContext.beginPath();
 myContext.strokeStyle="#FFA500";
 myContext.fillStyle=myContext.strokeStyle;
 myContext.arc(150, 150, 90, Math.PI/8, 3*Math.PI/2);
 myContext.stroke();
 myContext.fillText("3.PI/2", 150+90*Math.cos(3*Math.PI/2)+10, 150+90*Math.sin(3*Math.PI/2)-3);
 myContext.fillText("PI/8", 150+90*Math.cos(Math.PI/8)-10, 150+90*Math.sin(Math.PI/8)-3);


 /* Arc de cercle vert entre 3PI/4 et 5PI/4 */
 myContext.beginPath();
 myContext.strokeStyle="#00aa00";
 myContext.fillStyle=myContext.strokeStyle;
 myContext.arc(150, 150, 70, 3*Math.PI/4 , 5*Math.PI/4);
 myContext.stroke();
 myContext.fillText("3.PI/4", 150+70*Math.cos(3*Math.PI/4)+5, 150+70*Math.sin(3*Math.PI/4)+3);
 myContext.fillText("5.PI/4", 150+70*Math.cos(5*Math.PI/4)-10, 150+70*Math.sin(5*Math.PI/4)-3);

</script>