fillrule

Fill rule, or fill-rule, is a concept used in vector graphics and rendering to determine which regions of a closed path are considered inside the shape and should be filled. This is especially important for complex shapes that self-intersect or contain holes, where different rules can produce different visible results.

The two common fill rules are the nonzero winding rule and the even-odd rule. The nonzero winding rule determines inside-ness by tracing a ray from the point to infinity and summing contributions from each crossing based on the edge directions. If the resulting winding number is nonzero, the point is inside; if it is zero, the point is outside. The even-odd rule also shoots a ray and counts crossings, but only the parity matters: an odd number of crossings means the point is inside, while an even number means it is outside. These rules can yield markedly different fills for shape outlines that overlap or loop back on themselves.

Standards and usage vary by format. In SVG, the fill-rule attribute (with values nonzero or evenodd) controls how shapes such as path, polygon, and text shapes are filled; the default is nonzero. In CSS for SVG, the property can specify fill-rule as well. Other graphics systems also implement similar concepts; PDF and PostScript offer both rules, and modern canvas APIs expose options (such as Path2D constructions) to select the fill rule. The choice of rule affects how holes, overlaps, and self-intersections appear, and is chosen to match the intended visual result of the shape.