fill method

Fills subpaths by using the current fill style.

HTML Canvas 2D Context, Section 9

Syntax

CanvasRenderingContext2D.fill(fillRule);

Parameters

fillRule [in, optional]

Type: String

Set to evenodd to use the even-odd fill rule. If missing, uses non-zero winding rule.

Return value

This method does not return a value.

Standards information

Remarks

Starting with Internet Explorer 11 this method uses the non-zero winding number rule or the even-odd rule, based on the setting of the optional fillRule parameter. Earlier versions offer only the default non-zero winding number rule.

Examples

The following code example uses the lineTo and closePath methods to create a shape and then fills the shape.

Result output of code example showing a triangular filled figure.


<html>
<head>
    <title>Canvas fill example</title>
    <script>
        function fillDemo() {
            var canvas = document.getElementById("demo")
            if (canvas.getContext) {
                var ctx = canvas.getContext('2d');
                ctx.beginPath();
                ctx.lineWidth = "3";
                ctx.strokeStyle = "blue";  // This path is blue.
                ctx.fillStyle = "red";    // The fill is red.
                ctx.moveTo(0, 0);
                ctx.lineTo(150, 150);
                ctx.lineTo(200, 150);
                ctx.closePath();
                ctx.fill();
                ctx.stroke();           // Draw it.                      
            }
        }
          </script>
</head>
    <body onload="fillDemo();">
        <canvas id="demo" width="300" height="300">This browser or document mode doesn't support canvas</canvas>
  </body>
</html> 


This example runs in IE11 and shows effect of the msFillRule property. The images show the output of the nonzero and evenodd fillrule options.

Result output of code example using the nonzero fill rule. Result output of code example using the evenodd fill rule.


<!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

CanvasRenderingContext2D
closePath
beginPath
lineTo
msFillRule

 

 

Show:
© 2014 Microsoft