JavaScript Canvas fillRect Tutorial
Learn how to use JavaScript Canvas fillRect method effectively with examples and detailed explanations. Enhance your web development skills with this step-by-step tutorial.
JavaScript Canvas fillRect Tutorial
last modified April 3, 2025
In this article, we explore the Canvas fillRect method in JavaScript. This method is essential for drawing filled rectangles on HTML canvas. Mastering fillRect is crucial for creating graphics and visualizations.
Basic Definition
The fillRect method draws a filled rectangle on the canvas. It takes four parameters: x, y coordinates of the top-left corner, width, and height. The rectangle is filled using the current fill style.
Before using fillRect, you must set the fill style with fillStyle property. This can be a color, gradient, or pattern. The method is part of the Canvas 2D API’s drawing operations.
Basic fillRect Usage
This example demonstrates how to draw a simple filled rectangle on canvas.
index.html
<!DOCTYPE html> <html> <head> <title>Basic Canvas fillRect</title> </head> <body>
<canvas id=“myCanvas” width=“300” height=“200”></canvas>
<script> const canvas = document.getElementById(‘myCanvas’); const ctx = canvas.getContext(‘2d’);
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 200, 100);
</script>
</body> </html>
In this basic example, we create a canvas element and get its 2D rendering context. We set the fill color to blue using fillStyle property.
The fillRect method draws a filled rectangle at position (50,50) with width 200 and height 100. This demonstrates the simplest way to create a filled rectangle on canvas.
Multiple Rectangles with Different Colors
This example shows how to draw multiple rectangles with different fill colors.
index.html
<!DOCTYPE html> <html> <head> <title>Multiple fillRect</title> </head> <body>
<canvas id=“myCanvas” width=“400” height=“300”></canvas>
<script> const canvas = document.getElementById(‘myCanvas’); const ctx = canvas.getContext(‘2d’);
// First rectangle
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);
// Second rectangle
ctx.fillStyle = 'green';
ctx.fillRect(200, 50, 150, 100);
// Third rectangle
ctx.fillStyle = 'rgba(0, 0, 255, 0.5)';
ctx.fillRect(100, 150, 200, 100);
</script>
</body> </html>
Here we draw three rectangles with different colors and transparency. Each rectangle is drawn after setting a new fillStyle.
The third rectangle uses rgba color with alpha transparency (0.5). This shows how to create semi-transparent filled rectangles on canvas.
Gradient Filled Rectangle
This example demonstrates creating a rectangle filled with a linear gradient.
index.html
<!DOCTYPE html> <html> <head> <title>Gradient fillRect</title> </head> <body>
<canvas id=“myCanvas” width=“300” height=“200”></canvas>
<script> const canvas = document.getElementById(‘myCanvas’); const ctx = canvas.getContext(‘2d’);
const gradient = ctx.createLinearGradient(0, 0, 300, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.5, 'yellow');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(50, 50, 200, 100);
</script>
</body> </html>
Here we create a linear gradient that transitions from red to yellow to blue. This gradient is applied as the fill style for our rectangle.
The createLinearGradient defines the gradient direction (horizontal in this case). addColorStop adds color transition points. The gradient is then used to fill the rectangle.
Pattern Filled Rectangle
This example shows how to fill a rectangle with an image pattern.
index.html
<!DOCTYPE html> <html> <head> <title>Pattern fillRect</title> </head> <body>
<canvas id=“myCanvas” width=“300” height=“200”></canvas> <img id=“patternImg” src=“pattern.png” style=“display:none;">
<script> const canvas = document.getElementById(‘myCanvas’); const ctx = canvas.getContext(‘2d’); const img = document.getElementById(‘patternImg’);
img.onload = function() {
const pattern = ctx.createPattern(img, 'repeat');
ctx.fillStyle = pattern;
ctx.fillRect(50, 50, 200, 100);
};
</script>
</body> </html>
This example loads an image and uses it as a repeating pattern to fill a rectangle. The image is hidden from view but used as a texture.
The createPattern method creates a pattern from the image. The ‘repeat’ option tiles the image in both directions. The pattern is then used as fillStyle.
Animated fillRect
This example demonstrates animation using fillRect with requestAnimationFrame.
index.html
<!DOCTYPE html> <html> <head> <title>Animated fillRect</title> </head> <body>
<canvas id=“myCanvas” width=“400” height=“200”></canvas>
<script> const canvas = document.getElementById(‘myCanvas’); const ctx = canvas.getContext(‘2d’);
let x = 0;
const speed = 2;
function animate() {
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw rectangle
ctx.fillStyle = 'purple';
ctx.fillRect(x, 50, 50, 50);
// Update position
x += speed;
if (x > canvas.width) x = -50;
requestAnimationFrame(animate);
}
animate();
</script>
</body> </html>
This example creates a simple animation where a rectangle moves across the canvas. The animation loop is created using requestAnimationFrame.
Each frame clears the canvas, draws the rectangle at its current position, then updates the position. The rectangle wraps around when it exits the canvas.
Source
MDN Canvas fillRect Documentation
In this article, we have explored various techniques for drawing filled rectangles on HTML canvas. Mastering fillRect is essential for creating graphics and visualizations in web applications.
Author
My name is Jan Bodnar, and I am a passionate programmer with extensive programming experience. I have been writing programming articles since 2007. To date, I have authored over 1,400 articles and 8 e-books. I possess more than ten years of experience in teaching programming.
List all JS Canvas tutorials.
