JavaScript Canvas clearRect Tutorial
last modified April 3, 2025
In this article, we explore the Canvas clearRect method in JavaScript. This method is essential for clearing specific rectangular areas of an HTML canvas. Mastering clearRect is crucial for animations and dynamic graphics.
Basic Definition
The clearRect method clears the pixels in a specified rectangular area to transparent black (rgba(0,0,0,0)). It's often used to erase parts of the canvas or prepare areas for new drawings.
The method takes four parameters: x and y coordinates of the top-left corner, and width and height of the rectangle. It affects only the specified area, leaving other canvas content unchanged.
Basic clearRect Usage
This example demonstrates how to clear a rectangular area from a filled canvas.
<!DOCTYPE html>
<html>
<head>
<title>Basic clearRect</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Fill entire canvas with blue
ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Clear a rectangle in the middle
ctx.clearRect(100, 50, 100, 100);
</script>
</body>
</html>
In this basic example, we first fill the entire canvas with blue color using fillRect. Then we use clearRect to create a transparent rectangle in the middle.
The clearRect parameters (100,50,100,100) mean: start at x=100, y=50 and clear a 100px wide and 100px tall area. This shows the simplest clearRect usage.
Partial Canvas Clearing
This example shows how to clear multiple areas while preserving other content.
<!DOCTYPE html>
<html>
<head>
<title>Partial Clearing</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Draw a complex pattern
ctx.fillStyle = 'green';
for (let i = 0; i < canvas.width; i += 20) {
for (let j = 0; j < canvas.height; j += 20) {
ctx.fillRect(i, j, 10, 10);
}
}
// Clear specific areas
ctx.clearRect(50, 50, 100, 50);
ctx.clearRect(250, 100, 100, 100);
ctx.clearRect(150, 200, 200, 50);
</script>
</body>
</html>
Here we first create a grid pattern by drawing small green squares across the canvas. Then we clear three rectangular areas at different positions.
Each clearRect call removes content from its specified area, creating "holes" in the pattern. This demonstrates selective clearing while preserving other canvas content.
Animation with clearRect
This example shows how clearRect enables smooth animations by clearing frames.
<!DOCTYPE html>
<html>
<head>
<title>Animation with clearRect</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 ballRadius = 20;
function animate() {
// Clear only the area needed for animation
ctx.clearRect(x - ballRadius - 1, 0,
ballRadius * 2 + 2, canvas.height);
// Draw new ball position
ctx.beginPath();
ctx.arc(x, 100, ballRadius, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();
x += 2;
if (x > canvas.width + ballRadius) x = -ballRadius;
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
This animation moves a red ball across the canvas. Instead of clearing the entire canvas each frame, we only clear the area around the ball's last position.
The clearRect parameters account for the ball's radius plus 1px padding. This optimized clearing reduces flickering and improves performance compared to full canvas clears.
Interactive Clearing
This example demonstrates interactive clearing with mouse movements.
<!DOCTYPE html>
<html>
<head>
<title>Interactive Clearing</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="400"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Fill canvas with gradient
const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
gradient.addColorStop(0, 'purple');
gradient.addColorStop(1, 'orange');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Clear on mouse move
canvas.addEventListener('mousemove', (e) => {
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
ctx.clearRect(x - 25, y - 25, 50, 50);
});
</script>
</body>
</html>
This creates a canvas with a vertical gradient. As the mouse moves, it clears 50x50 pixel squares centered at the cursor position, revealing transparency.
The mousemove event calculates canvas-relative coordinates. clearRect then creates a clearing effect that follows the mouse, demonstrating interactive usage.
Advanced: Clearing with Composite Operations
This example combines clearRect with globalCompositeOperation for effects.
<!DOCTYPE html>
<html>
<head>
<title>Composite Clearing</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="400"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Draw background image (simulated)
ctx.fillStyle = 'lightblue';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'brown';
for (let i = 0; i < 100; i++) {
ctx.fillRect(
Math.random() * canvas.width,
Math.random() * canvas.height,
5, 5
);
}
// Set composite mode
ctx.globalCompositeOperation = 'destination-out';
// Clear with shapes instead of rectangles
function clearCircle(x, y, r) {
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI * 2);
ctx.fill();
}
// Interactive clearing
canvas.addEventListener('mousemove', (e) => {
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
clearCircle(x, y, 30);
});
</script>
</body>
</html>
This advanced example uses globalCompositeOperation to create non-rectangular clearing effects. We set the mode to 'destination-out' which makes any new drawing clear existing content.
Instead of clearRect, we use fill with arc to create circular cleared areas. The mouse movement clears content in circles rather than rectangles, showing creative clearing techniques.
Source
MDN Canvas clearRect Documentation
In this article, we have explored various techniques for using clearRect to manage canvas content. From basic clearing to advanced animations and effects, clearRect is a powerful tool for canvas manipulation.
Author
List all JS Canvas tutorials.