HTML5 Guidelines for Web Developers

5.5 Paths 129

This may sound simple but can get very complicated if paths self-intersect or
are nested. In such cases, the so-called non-zero winding number rule takes ef-
fect: It decides whether to fill or not depending on the winding direction of the
subpaths involved.

Figure 5.16 shows the non-zero rule in action. On the left, both circles were drawn
in clockwise direction; on the right, the inner circle was drawn counterclockwise,
leading to the hole in the center.

Figure 5.16 The non-zero fill rule for paths

To help us draw the directional circles, we used the helper from the arc()section,
this time slightly modified: The desired direction is now passed as an argument.
Valid settings for anticlockwise are 0 and 1 :

var circle = function(cx,cy,r,anticlockwise) {
context.moveTo(cx+r,cy);
context.arc(cx,cy,r,0,Math.PI*2.0,anticlockwise);
};

The code for the circle on the right with the hole in it looks like this:

context.beginPath();
context.fillStyle = 'yellow';