Layering and Clipping
Two other object modifications that can control the appearance of the canvas are clipping—controlling what is or is not drawn—and the globalCompositeOperation property, which determines how new objects are layered in relation to existing objects.
Clipping
Clipping isn't quite descriptive: you define an area where drawing is allowed, creating a "mask" over the rest of the canvas area and preventing any drawing in the masked area. It's somewhat like cutting a hole in cardboard, putting it over paper, and then drawing over the hole—the coloring only shows in the uncovered area. Clipping works on a path, which can be built with any path function: arc, line, or the curves.
Example 11-7 creates a large circular clipping path, then creates 20 random circles, many within the clipping path, some on the edge, and others outside the clipping path.
Example 11-7. Clipping circles
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Clipping Circles</title> <script type="text/javascript" src="addingajax.js"> </script> <script type="text/javascript"> //<![CDATA[ aaManageEvent(window,"load",setup); // generate random function random(max) { return Math.round(max*Math.random( )); } // generate random color function randomColor( ) { var color= "rgb(" + random(255) + "," + random(255) ...