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:
context.fillRect(x,y,width,height);
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:
Tryit<!DOCTYPE html><html><head><title>Wikitechy HTML Canvas fillRect with example</title></head><body><h2>HTML Canvas fillRect with example</h2><canvas id="wikitechyCanvas" width="370" height="200"
style="border:1px solid green;"></canvas><script>
var a = document.getElementById("wikitechyCanvas");
var context = a.getContext("2d");
context.fillRect(90, 50, 170, 100);
</script></body></html>
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:
Yes
Yes
Yes
Yes
Yes
Tips and Notes
The fillStyle property is used to set a color, gradient or pattern to the filled rectangle.
