fill method
Fills subpaths by using the current fill style.
![]() ![]() |
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
- HTML Canvas 2D Context, Section 9
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.

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


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

