Learn html - html tutorial - Fillrect method in html5 canvas - html examples - html programs
- The fillRect is a method of HTML <canvas> element.
- This method is used to draw a filled rectangle on the canvas.
- The default color of the filled rectangle is black.
- It has four parameters. They are, x, y, width and height.
Syntax for fillRect() Method in HTML5 Canvas:
Parameter values for fillRect() Method in HTML5 Canvas:
Value |
Description |
x |
The x axis coordinate of the rectangle starting point. |
y |
The y axis coordinate of the rectangle starting point. |
width |
It is used to set a width for the rectangle. |
height |
It is used to set a height for the rectangle. |
Sample Coding for fillRect() Method in HTML5 Canvas:
Code Explanation for fillRect() Method in HTML5 Canvas:
- ”wikitechyCanvas” is used to define the value of id attribute for canvas element.
- The getElementById(); method is used to get the element that has the id attributes with the value “wikitechycanvas”.
- a.getContext(“2d”) method is returns a two-dimensional drawing context on the canvas.
- fillRect(90,50,170,100) method is used to draw a filled rectangle on the canvas.
Output for fillRect() Method in HTML5 Canvas:
- The canvas rectangle with green border.
- This shows that a rectangle drawn by fillRect() method.
Browser Support for fillRect() Method in HTML5 Canvas:
Tips and Notes
- The fillStyle property is used to set a color, gradient or pattern to the filled rectangle.
Related Searches to fillRect() Method in HTML5 Canvas
canvas fillrect color
canvas rect
html5 canvas draw rectangle with mouse
canvas draw rectangle html
strokerect
rectangle blank canvas
javascript rectangle object
javascript draw rectangle with mouse
Html5 Canvas
html tutorials