This method is used to create a rectangle in the canvas.
It has four parameters they are x, y, width and height.
Syntax for rect() Method in HTML5 Canvas:
context.rect(x,y,width,height);
Parameter values for rect() 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 rect() Method in HTML5 Canvas:
Tryit<!DOCTYPE html><html><head><title>Wikitechy HTML Canvas rect()</title></head><body><h2>HTML Canvas rect with example</h2><canvas id="myCanvas" width="370" height="200"
style="border:1px solid blue;"></canvas><script>
var a = document.getElementById("myCanvas");
var context = a.getContext("2d");
context.rect(90, 50, 170, 100);
context.strokeStyle="green";
context.stroke();
</script></body></html>
Code Explanation for rect() Method in HTML5 Canvas:
”wikitechyCanvas” is used to define the id attribute value for canvas element.
The getElementById(); method is used to get the element that has the id attributes value as “wikitechyCanvas”.
a.getContext(“2d”) method is returns a two-dimensional drawing context on the canvas
rect() method is used to drawing a rectangle in the canvas.
strokeStyle is used to change the color of the rectangle outline as a green.
stroke method is used to draw a path on the canvas.
Output for rect() Method in HTML5 Canvas:
The canvas rectangle with blue border.
The green color rectangle shows that a rectangle drawn by using rect() method.
Browser Support for rect() Method in HTML5 Canvas:
Yes
9.0
Yes
Yes
Yes
Tips and Notes
The stroke or fill method is used to draw a rectangle on the canvas.
The strokeStyle property in canvas is used to change the color of the rectangle outline.
