Search within TutorialsPark

HTML5 Canvas Rectangles


Create Rectangles of specific sizes and colors on the Canvas.


Canvas Rectangle : fillRect(x,y,w,h).

Almost all complex shapes on canvas need to drawn by calling path method, and drawing it line by line. But rectangles can be drawn in one step.

1.A filled rectangle can be be drawn in one step using method fillRect(x,y,w,h).

2.Here "x" is starting points X co-ordinates.

"y" is starting points Y co-ordinates.

"w" is width of the rectangle.

"h" is height of the rectangle.

3.You can also specify the color of the fill using the fillStyle property.

Example:Rectangle using fillRect(x,y,w,h).

Give it a TRY! » NOTE-If do not specify the fillStyle property, the fill color is black by default.



Unfilled Rectangle:strokeRect(x,y,w,h).

1.The rectangle in the previous example was filled, to create an unfilled rectangle with just the outline of rectangle use method strokeRect(x,y,w,h).

Eg:context.strokeRect(10,20,100,200);

Example:Unfilled rectangle using strokeRect(x,y,w,h).

Give it a TRY! »


Clear Rectangle: clearRect(x,y,w,h).

1.What if you want to clear the screen of all drawings and shapes? Well, you can use the method clearRect(x,y,w,h).

Here,"x":Specifies the starting X co-ordinates to be erased.

"y":Specifies the starting Y co-ordinates to be erased.

"w":Width of the reactangle to be erased to be erased.

"h":Height of the rectangle to be erased.

2. Specify the full dimensions of the canvas to clear the entire area.

Eg: context.clearRect(10,50,80,70);

Example:Canvas strokeStyle property.

Give it a TRY! » Exercise-Try clearRect(x,y,w,h) with different values, notice the difference.





Related Examples

Related Tags