Canvas fill() Method
Definition and Usage
fill() method to fill the current image (path). The default color is black.
Hint:Please use fillStyle property to fill with another color/grayscale.
Note:If the path is not closed, then fill() The method adds a line from the end point of the path to the start point to close the path, and then fills the path.
Example
Draw a 150*100 pixel rectangle and then fill it with green:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.fillStyle="green";
ctx.fill();
Syntax
context.fill();
Browser Support
The numbers in the table indicate the first browser version that fully supports this property.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.
