Drawing Rectangle
In HTML5, almost all complex shapes on canvas are drawn by calling path method, and drawing it line by line. But rectangles can be drawn in one simple step.
There are 3 different ways in which a user can draw a Canvas Rectangle in html5.
Unfilled Rectangle:strokeRect(x, y, w, h)
To create a Simple Rectangle with just a outline use strokeRect(x, y, w, h) method.
Code
Fig9
Output
Fig10
Canvas Rectangle: fillRect(x, y, w, h)
A filled rectangle can be drawn in one step using method fillRect(x, y, w, h).
Here,
“x” represents the starting points of X co-ordinates.
“y” represents the starting points of Y co-ordinates.
“w” represents the width of the rectangle.
“h” represents the height of the rectangle.
A user can also specify the color of the fill using the fillStyle property.
Code
Fig11
Output
Fig12
Clear Rectangle: clearRect(x, y, w, h)
If you want to clear the Rectangle you can use the clearRect(x, y, w, h) method.
Here,
“x” specifies the starting X co-ordinates to be erased.
“y” specifies the starting Y co-ordinates to be erased.
“w” specifies the Width of the rectangle to be erased.
“h” specifies the Height of the rectangle to be erased.
Specify the full dimensions of the canvas to clear the entire area.
Code
Fig13
Output
Fig14