Several simple ways to draw arcs

Display diagram:

//Draw arc true: Counterclockwise false: clockwise
context.linewidth=5;
context.strokestyle= "Pink";
Context.arc (40,40,30,0,math.pi*2);
Context.stroke ();// outer ring is a pink circle, no fill color


Context.beginpath ();
context.strokestyle= "Yellow";
context.fillstyle= "Red";
Context.arc (100,40,30,0,math.pi*2);
Context.fill ();
Context.stroke ();//outer ring is yellow, inner padding is red

Context.beginpath ();
context.strokestyle= "Yellow";
context.fillstyle= "Red";
Context.arc (180,40,30,0,math.pi/3,true);
Context.stroke ();// outer ring is yellow

Context.beginpath ();
context.strokestyle= "Yellow";
context.fillstyle= "Red";
Context.arc (260,40,30,0,math.pi/3,true);
Context.fill ();// inner padding is a 60-degree arc of Red

Context.beginpath ();
context.strokestyle= "Yellow";
context.fillstyle= "Red";
Context.arc (260,100,30,0,math.pi/3,true);
Context.fill ();
Context.stroke ();// outer ring is yellow, inner padding is red 's 60 degree arc

Several simple ways to draw arcs