Utilizing the JavaScript Canvas, we can construct a rectangle. A rectangle is defined by its width and height, and in this article, we will illustrate how to draw a rectangle using these specific dimensions.
The three most common methods of drawing rectangles on canvas are:
- The rect method
- The fillRect method
- The strokeRect method
The rect Method
A rectangle is defined by the rect method.
The coordinates for the upper-left corner of the rectangle can be specified using the rect(x, y, width, height) method. Additionally, this method allows us to set both the width and height of the rectangle.
Syntax:
context.Rect( x, y, width, height );
The arguments for the rect function are outlined below:
x: The coordinate of the upper-left corner of the rectangle.
y: The vertical coordinate of the upper-left corner of the rectangle.
width: The measurement of the rectangle's width is expressed in pixels.
height: The vertical measurement of the rectangle is expressed in pixels.
Demo: This demo utilizes Rect to define the rectangle on the canvas.
We will begin at the coordinates (20, 20) and employ the rect function to specify a rectangle measuring 140 pixels in width and 90 pixels in height. The rectangle is subsequently rendered using the stroke function:
Code:
<!DOCTYPE html>
<html>
<body>
<h1>Example for JavaScript rect() method</h1>
<canvas id="myRect" width="400" height="200" style="border:2px solid red">
If your browser does not support canvas then it will display as:
Sorry, your browser does not support canvas.
</canvas>
<script>
const rect = document.getElementById("myRect");
const example = rect.getContext("2d");
example.rect(20, 20, 140, 90);
example.stroke();
</script>
</body>
</html>
Output:
fillRect method
We are employing the fillRect function to render a solid rectangle. The fillStyle attribute is used to specify the color.
The fillStyle attribute determines the color used for filling shapes. By default, if the fillStyle attribute is not set, the fill color will be black.
Syntax:
context.fillRect( x, y, width, height );
Parameters
In the fillRect method, the x-coordinate serves as one of the parameters that determines the position of the rectangle's upper-left corner.
In the fillRect function, the y-coordinate serves as one of the inputs that define the position of the upper-left corner of the rectangle.
width: The measurement of the rectangle's width is defined in pixels.
height: The measurement of the rectangle's height is expressed in pixels.
Demo 1: This demo utilizes fillRect to display the rectangle on the canvas.
To create a filled rectangle measuring 140 pixels in width and 90 pixels in height using the fillRect method, and starting at the coordinates (8, 8), you would proceed as follows:
Code:
<!DOCTYPE html>
<html>
<body>
<h1>Example for fillRect() method</h1>
<canvas id="myRect" width="400" height="150" style="border:1px solid black">
</canvas>
<script>
const main = document.getElementById("myRect");
const ctx = main.getContext("2d");
ctx.fillRect(8, 8, 140, 90);
</script>
</body>
</html>
Output:
Demo 2
We will employ the fillStyle property to define the fill color:
Code:
<!DOCTYPE html>
<html>
<body>
<h1>Example for fillRect() method by using fillStyle property to fill the color in rectangle</h1>
<canvas id="myCanvas" width="200" height="120" style="border:4px solid pink">
</canvas>
<script>
const style = document.getElementById("myCanvas");
const one = style.getContext("2d");
one.fillStyle = "lightblue";
one.fillRect(8,8, 140,90);
</script>
</body>
</html>
Output:
strokeRect method
The outlined rectangle is created using the strokeRect method. The strokeStyle property is employed to specify the color of the stroke, with black being the default color assigned to the stroke.
Syntax:
context.strokeRect(x, y, width, height, linewidth);
Parameters
In the strokeRect function, the x-coordinate serves as one of the parameters that define the upper-left corner of the rectangle.
In the strokeRect function, the y-coordinate serves as one of the parameters that define the upper-left corner of the rectangle.
width: It is expressed in pixels.
height: It is expressed in pixels.
linewidth: Display the stroke's thickness.
The strokeStyle attribute defines the color used for strokes. If the strokeStyle attribute is not set, the default stroke color will be black.
Demo 1
We will create a rectangle measuring 140 pixels in width and 90 pixels in height, starting from the coordinates (8, 8), by employing the strokeRect method:
Code:
<!DOCTYPE html>
<html>
<body>
<h1>Example for strokeRect() method</h1>
<canvas id="myRect" width="200" height="150" style="border:2px solid red">
</canvas>
<script>
const main = document.getElementById("myRect");
const one = main.getContext("2d");
one.strokeRect(8, 8, 140, 90);
</script>
</body>
</html>
Output:
Demo 2
We will employ the strokeStyle property to modify the color of the outline:
Code:
<!DOCTYPE html>
<html>
<body>
<h1>Example for strokeRect() method using strokeStyle property</h1>
<canvas id="myRect" width="200" height="130" style="border:1px solid black">
</canvas>
<script>
const canvas = document.getElementById("myRect");
const func = canvas.getContext("2d");
func.strokeStyle = "red";
func.strokeRect(8,8, 140,90);
</script>
</body>
</html>
Output:
Additional Demo
We can generate three rectangles by employing the rect function:
Code:
<!DOCTYPE html>
<html>
<body>
<h1>Example to create three rectangles using rect() method</h1>
<canvas id="myRect" width="400" height="170" style="border:2px solid black">
</canvas>
<script>
const canvas = document.getElementById("myRect");
const main = canvas.getContext("2d");
// Pink rectangle
main.beginPath();
main.lineWidth = "6";
main.strokeStyle = "pink";
main.rect(6, 6, 250, 150);
main.stroke();
// Red rectangle
main.beginPath();
main.lineWidth = "4";
main.strokeStyle = "red";
main.rect(20, 30, 40, 40);
main.stroke();
// Green rectangle
main.beginPath();
main.lineWidth = "10";
main.strokeStyle = "green";
main.rect(40, 20, 100, 60);
main.stroke();
</script>
</body>
</html>
Output:
Conclusion
We have comprehended the following points from this article:
- Types of methods of drawing rectangles on canvas.
- 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.
- The fillRect method has a fillStyle property that is utilized to define the color.
- 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.