Html5-Canvas draw an arc (Circular)

<SCRIPT type = "text/JavaScript" src = "jquery-1.5.1.min.js"> </SCRIPT> <SCRIPT type = "text/JavaScript"> $ (  Function  (){  VaR Can = Document. getelementbyid ("can" );  VaR CTX = can. getcontext ("2D" ); CTX. beginpath ();  CTX. ARC ( 75, 75, 50, 0, math. Pi * 2, True ); //  Outer Ring CTX. moveTo (110,75); CTX. ARC ( 75, 75, 35, 0, math. Pi, False ); //  Mouth, Half Ring CTX. moveTo (65,65 ); CTX. ARC ( 60, 65, 5, 0, math. Pi * 2, True ); //  Left eye CTX. moveTo (95,65 ); CTX. ARC ( 90,65, 5, 0, math. Pi * 2, True ); //  Right eye CTX. Stroke (); // use CTX. Fill (); that is, fill color ;}) </SCRIPT>

 
<CanvasID= "Can"Width= "150"Height= "150"> </Canvas>
 

 
CTX. Arc
 

Parameter description: (defines a center point, radius, start angle, end angle, and drawing direction: clockwise or counterclockwise );

CTX. Stroke: draws the border of the image;



Ideas:

1. First Use CTX. moveTo to move the painting start point and CTX. arc to draw the path (the painting path here is not actually drawn to the canvas, just like the pen path tool in Photoshop ).

2. Use CTX. Stroke (); To create a border and draw the border on the canvas;
 

 
The following CTX. Stroke (only the border draw path, so only the line)
 

 
The following CTX. Fill (fill color draw path, will automatically close the path)