msFillRule property
Gets or sets the fill rule used to check if a point is inside a shape when filling.
This property is read/write.
![]() ![]() |
Syntax
context.msFillRule = "evenodd";
Property values
Type: DOMString
Use one of the following
| Value | Condition |
|---|---|
|
Default value. |
|
Standards information
Remarks
A Fill rule impacts how a shape is filled. The msFillRule property as described in the W3C Canvas 2D Context Level 2 spec gives you two options, the default non-zero fill rule, and the even-odd fill rule. This property sets the global fill rule used by Canvas during a session. You can also set the fill rule individually as described in the W3C Canvas 2D Context, Level 2 spec on the following APIs:
Non-zero winding rule and even-odd rule are two algorithms used to check if a point is inside or outside an enclosed shape built with a path.
The non-zero winding rule specifies that you draw a ray from the point to infinity. Starting with a count of zero, add a one each time a path crosses the ray from left to right. If the path crosses the ray from the right to the left, subtract a one. If the result is zero once the counting is complete, then the point is outside the path, otherwise it's inside. Here's how that works:

The following star is drawn and filled using the non-zero fill rule with the point set to the center.

The even-odd rule specifies that you draw a ray from a point to infinity in any direction. Count the number of path segments that the ray crosses. If the count is an odd number, then the point is inside the shape. If it's even, then the point is outside the shape. The following picture is drawn the same way as the previous one, except it is filled using the even-odd fill rule.

Examples
This example creates the illustrations shown above. It runs in IE11 and shows effect of the msFillRule property. Try this example.
<!DOCTYPE html> <html> <head> <title>msFillRule example</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <script type="text/javascript"> function draw() { var canvas = document.getElementById("MyCanvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear area for repeated use ctx.beginPath(); ctx.strokeStyle = "blue"; ctx.lineWidth = "5" ctx.moveTo(200, 110); ctx.lineTo(50, 110); ctx.lineTo(300, 310); ctx.lineTo(200, 10); ctx.lineTo(100, 310); ctx.lineTo(350, 110); ctx.lineTo(100, 110); ctx.stroke(); ctx.fillStyle = "yellow"; if (ctx.msFillRule == "nonzero") { ctx.msFillRule = "evenodd"; document.getElementById("myButton").innerHTML = "Change to non-zero"; } else { ctx.msFillRule = "nonzero"; document.getElementById("myButton").innerHTML = "Change to even-odd"; } ctx.fill(); } } </script> </head> <body onload="draw();"> <canvas id="MyCanvas" width="400" height="400">This browser or document mode doesn't support canvas</canvas> <br /> <button id="myButton" onclick="draw();">Change</button> </body> </html>
See also

