it is drawn in the opposite sense to the first triangle and the winding number of a point in the middle is now zero and hence the hole is not filled:
So what happens to a “hole” in a shape depends on which way you draw the disconnected path that fills it.
How do you work out the fill rule to use in any given case?
Most often you simply try it out and see. If a hole that you want to have unfilled is being filled then you can either change the direction you draw it in or try the odd-even rule.
For example, consider the space ship path introduced in the previous chapter. We could add a “port hole” by adding a circle path to it:
var Path1 = new Path2D("m 98.684674,206.63833
c 2.891926,-25.77092 -1.958475,-65.0136 -13.037221,
-73.92172 -11.072474,8.90817 -17.526591,48.1508 -14.634563,
73.92172 -9.479011,8.46903 -9.015897,17.40218 -9.068381,29.71617
l 5.92022,-0.074
c 0,0 2.493141,-15.15787 5.105513,-16.98251
l 3.15542, 8.06751 -1.537022,9.15649
c 13.277647,-0.17974 7.242537,-0.17974 20.52018,0
l -1.537022,-9.15649 3.15552,-8.06751
c 2.979241,2.08093 3.605942,17.00168 3.605942,17.00168
l 6.61799,0.0548
c -0.0526,-12.31399 1.21238,-21.24714 -8.266576,-29.71617 z");
var Path2 = new Path2D();
Path2.arc(85, 180, 10, 0, 2 * Math.PI, 0);
Path1.addPath(Path2);
ctx.fill(Path1, "nonzero");
If we fill the path using the non-zero rule then the hole will not be filled if the circle is drawn in the same direction as the outer path:
However, if you change the arc function to:
Path2.arc(85, 180, 10, 0, 2 * Math.PI, 1);
i.e. draw the circle in the opposite direction, then the port hole will be filled in.
In chapter but not in this extract:
Gradient Fills
Pattern Fills
Summary
The stroke function simply colors the outline of the path, whereas fill colors all of the points in the interior of the path.
Color can be specified by name, RGB components or HSL.
Alpha values control the transparency of the color, with 1.0 being opaque and 0.0 being completely transparent.
For stroke you can set the lineWidth, lineCap, lineJoin and lineDash.
Anti-aliasing makes drawing look smoother, but it can cause unexpected results for small details. It cannot be disabled.
The simplest way of combining old and new colors is the painter’s algorithm, which allows the latest color to cover up the old.
Determining what is a “hole” in a closed path is difficult. There are two general rules, odd-even and non-zero winding, and they are both valid ways of defining a hole.
As well as solid color fills, you can also use linear gradient and radial gradient fills.
Pattern fills allow you to use any bitmap as a sort of “wallpaper” for the interior of paths.
Now available as a paperback or ebook from Amazon.
