HTML Canvas Rectangles
HTML Canvas Rectangles
The three most used methods for drawing rectangles in canvas are:
- The
rect()method - The
fillRect()method - The
strokeRect()method
The rect() Method
The rect() method defines a rectangle.
The rect() method has the following parameters:
| Parameter | Description |
|---|---|
| x | The x-coordinate of the upper-left corner of the rectangle |
| y | The y-coordinate of the upper-left corner of the rectangle |
| width | The width of the rectangle, in pixels |
| height | The height of the rectangle, in pixels |
Example
Use
rect() to define a 150*100 pixels rectangle, starting in position (10,10). Then use
stroke() to actually draw the rectangle:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.rect(10,10, 150,100);
ctx.stroke();
</script>
Try it Yourself »
Notice that the rect() method does not draw
the rectangle (it just defines it). So, in addition, you have to use the
stroke() method (or the fill() method)
to actually draw it.
The fillRect() Method
The fillRect() method draws a filled rectangle.
The fillRect() method has the following parameters:
| Parameter | Description |
|---|---|
| x | The x-coordinate of the upper-left corner of the rectangle |
| y | The y-coordinate of the upper-left corner of the rectangle |
| width | The width of the rectangle, in pixels |
| height | The height of the rectangle, in pixels |
The fill-color is specified with the fillStyle property.
If the fillStyle property is not set, the fill-color
defaults to black.
Example
Use
fillRect() to draw a filled 150*100 pixels rectangle, starting in position (10,10):
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillRect(10,10, 150,100);
</script>
Try it Yourself »
Example
Set the fill-color with the
fillStyle property:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "pink";
ctx.fillRect(10,10, 150,100);
</script>
Try it Yourself »
The strokeRect() Method
The strokeRect() method draws
a stroked (outlined) rectangle.
The strokeRect() method has the following parameters:
| Parameter | Description |
|---|---|
| x | The x-coordinate of the upper-left corner of the rectangle |
| y | The y-coordinate of the upper-left corner of the rectangle |
| width | The width of the rectangle, in pixels |
| height | The height of the rectangle, in pixels |
The stroke-color is specified with the strokeStyle property.
If the strokeStyle property is not set, the stroke-color
defaults to black.
Example
Use
strokeRect() to draw a stroked 150*100 pixels rectangle, starting in position (10,10):
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.strokeRect(10,10, 150,100);
</script>
Try it Yourself »
Example
Set the color of the outline with the
strokeStyle property:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "blue";
ctx.strokeRect(10,10, 150,100);
</script>
Try it Yourself »
More Examples
Example
Create three rectangles with the rect() method:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Red rectangle
ctx.beginPath();
ctx.lineWidth = "6";
ctx.strokeStyle = "red";
ctx.rect(5, 5, 290, 140);
ctx.stroke();
// Green rectangle
ctx.beginPath();
ctx.lineWidth = "4";
ctx.strokeStyle = "green";
ctx.rect(30, 30, 50, 50);
ctx.stroke();
// Blue rectangle
ctx.beginPath();
ctx.lineWidth = "10";
ctx.strokeStyle = "blue";
ctx.rect(50, 50, 150, 80);
ctx.stroke();
</script>
Try it Yourself »
Example
Obtain the same result as above, with less code, using the
strokeRect() method:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Red rectangle
ctx.lineWidth = "6";
ctx.strokeStyle = "red";
ctx.strokeRect(5, 5, 290, 140);
// Green rectangle
ctx.lineWidth =
"4";
ctx.strokeStyle = "green";
ctx.strokeRect(30, 30, 50, 50);
// Blue rectangle
ctx.lineWidth = "10";
ctx.strokeStyle = "blue";
ctx.strokeRect(50, 50, 150, 80);
</script>
Try it Yourself »
