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.

HTML Canvas 2D Context level 2IE11



context.msFillRule = "evenodd";

Property values

Type: DOMString

Use one of the following


Default value.



Standards information


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:

Image of star with arrows on each leg showing the direction of the path

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

Image of a star drawn with canvas and using the non-zero fill rule

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.

Image of a star drawn with canvas and using the even-odd fill rule


This example creates the illustrations shown above. It runs in IE11 and shows effect of the msFillRule property. Try this example.

<!DOCTYPE html> 
  <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.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.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";
<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>

See also




© 2016 Microsoft