Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to draw a rectangle on HTML5 Canvas?
The HTML5 Canvas element provides a powerful way to draw graphics dynamically using JavaScript. The <canvas> tag creates a drawing surface, and we use its 2D rendering context to draw shapes like rectangles, circles, and lines.
To draw rectangles on canvas, we use methods like fillRect() for filled rectangles and strokeRect() for outlined rectangles. These methods require coordinates and dimensions to position and size the rectangle on the canvas.
Syntax
Following is the syntax for drawing filled rectangles on canvas −
context.fillRect(x, y, width, height);
Following is the syntax for drawing outlined rectangles −
context.strokeRect(x, y, width, height);
Parameters
The rectangle drawing methods accept the following parameters −
x − The x-coordinate of the rectangle's top-left corner
y − The y-coordinate of the rectangle's top-left corner
width − The width of the rectangle in pixels
height − The height of the rectangle in pixels
Drawing a Filled Rectangle
The fillRect() method draws a solid rectangle filled with the current fillStyle color.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas - Filled Rectangle</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Filled Rectangle Example</h3>
<canvas id="canvas1" width="300" height="150" style="border: 1px solid #000;"></canvas>
<script>
var canvas = document.getElementById('canvas1');
var ctx = canvas.getContext('2d');
// Set fill color and draw rectangle
ctx.fillStyle = '#7cce2b';
ctx.fillRect(50, 30, 200, 80);
</script>
</body>
</html>
The output displays a green filled rectangle −
[Canvas with green filled rectangle at coordinates (50,30) with width 200 and height 80]
Drawing an Outlined Rectangle
The strokeRect() method draws only the outline of a rectangle using the current strokeStyle color and lineWidth.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas - Outlined Rectangle</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Outlined Rectangle Example</h3>
<canvas id="canvas2" width="300" height="150" style="border: 1px solid #000;"></canvas>
<script>
var canvas = document.getElementById('canvas2');
var ctx = canvas.getContext('2d');
// Set stroke properties and draw rectangle outline
ctx.strokeStyle = '#ff6b35';
ctx.lineWidth = 3;
ctx.strokeRect(50, 30, 200, 80);
</script>
</body>
</html>
The output displays an orange outlined rectangle −
[Canvas with orange outlined rectangle at coordinates (50,30) with width 200 and height 80]
Drawing Multiple Rectangles
You can draw multiple rectangles with different colors and positions on the same canvas.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas - Multiple Rectangles</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Multiple Rectangles Example</h3>
<canvas id="canvas3" width="400" height="200" style="border: 1px solid #000;"></canvas>
<script>
var canvas = document.getElementById('canvas3');
var ctx = canvas.getContext('2d');
// Draw first rectangle (filled)
ctx.fillStyle = '#ff6b6b';
ctx.fillRect(20, 20, 100, 60);
// Draw second rectangle (filled)
ctx.fillStyle = '#4ecdc4';
ctx.fillRect(140, 20, 100, 60);
// Draw third rectangle (outlined)
ctx.strokeStyle = '#45b7d1';
ctx.lineWidth = 4;
ctx.strokeRect(260, 20, 100, 60);
// Draw overlapping rectangle
ctx.fillStyle = 'rgba(255, 193, 7, 0.7)';
ctx.fillRect(80, 100, 240, 50);
</script>
</body>
</html>
The output shows multiple rectangles with different colors and styles −
[Canvas with red, teal, and blue outlined rectangles on top, and a semi-transparent yellow rectangle below]
Clearing Rectangle Areas
The clearRect() method erases a rectangular area, making it transparent.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas - Clear Rectangle</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Clear Rectangle Example</h3>
<canvas id="canvas4" width="300" height="150" style="border: 1px solid #000;"></canvas>
<script>
var canvas = document.getElementById('canvas4');
var ctx = canvas.getContext('2d');
// Fill entire canvas
ctx.fillStyle = '#e74c3c';
ctx.fillRect(0, 0, 300, 150);
// Clear a rectangular area
ctx.clearRect(50, 30, 200, 80);
// Draw a small rectangle in the cleared area
ctx.fillStyle = '#27ae60';
ctx.fillRect(125, 55, 50, 30);
</script>
</body>
</html>
The output shows a red canvas with a cleared rectangular area containing a small green rectangle −
[Canvas with red background, transparent rectangular area, and small green rectangle in the center]
Rectangle Methods Comparison
| Method | Purpose | Style Property |
|---|---|---|
fillRect() |
Draws a filled rectangle | fillStyle |
strokeRect() |
Draws rectangle outline only |
strokeStyle, lineWidth
|
clearRect() |
Erases rectangular area | None (makes area transparent) |
Conclusion
Drawing rectangles on HTML5 Canvas is straightforward using fillRect() for solid rectangles, strokeRect() for outlines, and clearRect() for erasing areas. These methods provide the foundation for more complex canvas drawings and are essential for creating graphics, games, and visualizations in web applications.
2K+ Views
