Drawing on the Canvas - HTML5 Canvas - page 81

context . strokeStyle = "blue" ;
context . lineWidth = 5 ;
context . arc ( 100 , 100 , 50 , ( Math . PI / 180 ) * 0 , ( Math . PI / 180 ) * 360 , false false );

//full circle
context . stroke ();
context . closePath ();

}

Figure 2-10. The Canvas clipping region

Example 2-5 first draws a large 200×200 black rectangle onto the canvas. Next, we set our
Canvas clipping region to rect(0,0,50,50) . The clip() call then clips the canvas to those
specifications. When we draw our full red circle arc, we see only the portion inside this rect-
angle. Finally, we set the clipping region back to rect(0,0,500,500) and draw a new blue
circle. This time, we can see the entire circle on the canvas.

NOTE

OtherCanvasmethodscanbeusedwiththeclippingregion.Themostobviousisthe arc() function:

arc ( float float x , float float y , float float radius , float float startAngle , float float endAngle ,

boolean anticlockwise ) boolean

This can be used to create a circular clipping region instead of a rectangular one.