html tutorial - fill() Method in HTML5 Canvas - html5 - html code - html form
Learn html - html tutorial - Fill method in html5 canvas - html examples - html programs
- The fill() method is one of the canvas method.
- This method is used to fills the current drawing (path).
Syntax for fill() method in HTML5 CANVAS:
Sample coding for fill() method in HTML5 Canvas:
Code Explanation for fill() method in HTML5 Canvas:
- “WikitechyCanvas” is used to declare the id value of the canvas tag.
- getElementById method is used to get the id value as “wikitechyCanvas” from the canvas for draw a rectangle on the canvas.
- getContext(“2d”) is used to draw a two-dimension figure on the canvas.
- beginpath() method is used to begins the path for rectangle.
- The fillStyle property is used to set the green color in first rectangle.
- The fill() method is used to fill green color to the first rectangle.
- fillStyle property is used to set the red color in second rectangle.
- The fill() method is used to fill the second rectangle.
Output for fill() method in HTML5 Canvas:
- The output shows that a canvas rectangle with width as 500 and height as 250.
- The first rectangle filled with green color.
- The second rectangle filled with red color.
Browser Support for fill() method in HTML5 Canvas:
Tips and Notes
- The fillstyle property is used to fill the another color or gradient.
- If the path is not closed, the fill() method will add a line from the last point to the startpoint of the path to close the path, and then fill the path.