A drawing illustrating the results of polygon fill in the HTML CANVAS ELEMENT

HTML CANVAS Element Polygon Fill Discussion

context.fill() paints the area within the current path, using the nonzero winding-number fill rule.

The fill color is an attribute of the graphics state. You can set the current fill color by setting a value for the fillStyle property.

When you fill the current path, the canvas fills each subpath independently. Any subpath that has not been explicitly closed is closed implicitly by the fill routines.

The fill rule used by this method is called the nonzero winding number rule. To understand how this rule works, draw a line in any direction, starting from the given point and moving to infinity. Starting with a count of zero, add one to the count every time a path segment crosses the line from left to right, and subtract one every time a path segment crosses the line from right to left. If the result is zero, the point is outside the path and is not filled.