Create a Rectangular Shape in JavaScript

We can create a rectangle with the help of JavaScript Canvas Rectangle. As we know rectangle is drawn using width and height and here in this article, we will draw a rectangle using those parameters.

The three most common methods of drawing rectangles on canvas are:

1. The rect() method
2. The fillRect() method
3. The strokeRect() method

The rect() Method

A rectangle is defined by the rect() method.

We can define the coordinates of the upper-left corner of the rectangle with the rect(x,y, width, height) method. We can also define the width and height of the rectangle.

Syntax:

The parameters for the rect() method are as follows:

x: The rectangle's upper-left corner's coordinate.

y: The rectangle's upper-left corner's y-coordinate.

width: The width of the rectangle is measured in pixels.

height: The rectangle's height is measured in pixels.

Demo: This demo utilizes Rect() to define the rectangle on the canvas.

We will start at position (20, 20) and utilize rect() to define a 140*90 pixel rectangle. The rectangle is then actually drawn utilizing stroke():

Code:

Output:

fillRect() method

We are utilizing the fillRect() method to draw a filled rectangle. The fillStyle property is utilized to define the color.

The fillStyle property specifies the fill-color. The fill-color defaults to black in the absence of the fillStyle property.

Syntax:

Parameters

x: In fillRect() method, the x-coordinate is one of the parameters of the rectangle's upper-left corner.

y: In fillRect() method, the y-coordinate is one of the parameters of the upper-left corner of the rectangle.

width: The width of the rectangle is expressed in pixels.

height: The height of the rectangle is measured in pixels.

Demo 1: This demo utilizes fillRect() to display the rectangle on the canvas.

Drawing a filled rectangle with 140 by 90 pixels utilizing fillRect() and beginning at position (8, 8):

Code:

Output:

Demo 2

We will utilize the fillStyle property to set the fill-color:

Code:

Output:

strokeRect() method

The stroked (outlined) rectangle is drawn utilizing the strokeRect() function. The strokeStyle property is utilized to define the stroke's color and black is the default color for the stroke.

Syntax:

Parameters

x: In strokeRect() method, the x-coordinate is one of the rectangle's upper-left corner parameters.

y: In strokeRect() method, the y-coordinate is one of the rectangle's upper-left corner parameters.

width: It is expressed in pixels.

height: It is expressed in pixels.

linewidth: Display the stroke's thickness.

The strokeStyle property specifies the stroke-color. The default stroke-color is black if the strokeStyle property is left empty.

Demo 1

We will draw a 140 by 90 pixel rectangle with strokes beginning at position (8, 8) utlizing strokeRect():

Code:

Output:

Demo 2

We will utilize the strokeStyle property to change the outline's color:

Code:

Output:

Additional Demo

We can create three rectangles utilizing the rect() method:

Code:

Output:

Conclusion

We have comprehended the following points from this article:

1. Types of methods of drawing rectangles on canvas.
2. We have also understood that the rect() method only defines the rectangle: it will not draw it. So we are required to utilize the stroke() or fill() method to draw it.
3. The fillRect() method has a fillStyle property that is utilized to define the color.
4. The strokeRect() function is utilized to stroke or draw the outline for the rectangle. The strokeStyle property is utilized to define the stroke's color.