Chapter 40: Canvas clearRect()
1. What is clearRect() actually? (Clear definition first)
clearRect(x, y, width, height) is the eraser / white-out / reset tool of the Canvas.
It removes / clears / wipes out everything that was previously drawn inside the rectangular area you specify.
Think of it like this:
- You drew a circle, some text, a rectangle, some lines…
- Now you want to erase part (or all) of the canvas to redraw something new
- Instead of undoing every step (which is impossible in Canvas), you use clearRect() to blank out a rectangle-shaped region
Very important rule everyone must remember from day one:
- clearRect() does not change the canvas background color — it makes the area transparent (you see whatever is behind the canvas, usually white page or whatever CSS background you set)
- If you want a solid color background after clearing, you must redraw the background right after clearRect()
2. Syntax of clearRect() (Very Simple)
JavaScript
|
0 1 2 3 4 5 6 |
ctx.clearRect(x, y, width, height); |
- x → starting left position (from left edge of canvas)
- y → starting top position (from top edge of canvas)
- width → how wide the cleared area is
- height → how tall the cleared area is
Clear the entire canvas (most common use):
JavaScript
|
0 1 2 3 4 5 6 |
ctx.clearRect(0, 0, canvas.width, canvas.height); |
Clear only a small part:
JavaScript
|
0 1 2 3 4 5 6 |
ctx.clearRect(100, 100, 200, 150); // clears a 200×150 rectangle starting at (100,100) |
3. Your First clearRect() Example – Erase & Redraw (Copy-Paste & Run)
Create canvas-clearrect-demo.html:
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas clearRect() – Erase Demo</title> <style> canvas { border: 4px solid #2c3e50; background: #ecf0f1; display: block; margin: 30px auto; } button { display: block; margin: 20px auto; padding: 12px 30px; font-size: 18px; cursor: pointer; } </style> </head> <body> <h1>Canvas clearRect() – See the Eraser in Action</h1> <canvas id="demoCanvas" width="600" height="400"></canvas> <button id="eraseBtn">Erase Center Area</button> <button id="redrawBtn">Redraw Everything</button> <script> const canvas = document.getElementById('demoCanvas'); const ctx = canvas.getContext('2d'); const eraseBtn = document.getElementById('eraseBtn'); const redrawBtn = document.getElementById('redrawBtn'); // Function to draw the initial scene function drawScene() { // Background ctx.fillStyle = '#ecf0f1'; ctx.fillRect(0, 0, canvas.width, canvas.height); // Big blue rectangle ctx.fillStyle = '#3498db'; ctx.fillRect(50, 50, 500, 300); // Yellow circle ctx.beginPath(); ctx.arc(300, 200, 100, 0, Math.PI * 2); ctx.fillStyle = '#f1c40f'; ctx.fill(); ctx.strokeStyle = '#d35400'; ctx.lineWidth = 10; ctx.stroke(); // Text ctx.font = 'bold 40px Arial'; ctx.fillStyle = 'white'; ctx.textAlign = 'center'; ctx.fillText('Original Scene', 300, 220); } // Draw initial scene drawScene(); // Erase center button eraseBtn.addEventListener('click', () => { // Erase a rectangle in the center ctx.clearRect(150, 100, 300, 200); // Show what happened ctx.font = '24px Arial'; ctx.fillStyle = '#e74c3c'; ctx.textAlign = 'center'; ctx.fillText('Center erased with clearRect()', 300, 350); }); // Redraw button redrawBtn.addEventListener('click', () => { drawScene(); }); </script> </body> </html> |
What happens when you click buttons:
- “Erase Center Area” → wipes out a rectangle in the middle (you see the page background or canvas background color)
- “Redraw Everything” → brings back the full scene
4. Very Common Real-World Uses of clearRect()
A. Animation loop (clear before each frame)
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function animate() { // Clear the entire canvas first ctx.clearRect(0, 0, canvas.width, canvas.height); // Redraw moving object at new position ctx.fillRect(x += 2, 150, 50, 50); requestAnimationFrame(animate); } requestAnimationFrame(animate); |
B. Erase only part (like a moving eraser)
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 |
// Erase a small area under mouse canvas.addEventListener('mousemove', (e) => { const rectSize = 40; ctx.clearRect(e.offsetX - rectSize/2, e.offsetY - rectSize/2, rectSize, rectSize); }); |
C. Create transparent window / cutout
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 |
// Draw background image first ctx.drawImage(img, 0, 0, canvas.width, canvas.height); // Then cut a transparent rectangle ctx.clearRect(200, 150, 200, 150); |
5. Teacher’s Quick Tips (Hyderabad Student Style 😄)
- clearRect() makes the area transparent — if you want a solid color background after clearing, redraw the background immediately after
- Always clear before drawing new frame in animation — otherwise old drawings stay and you get trails
- Common mistake #1: Forget to clear → old shapes keep appearing (messy animation)
- Common mistake #2: Clear too much → accidentally erase something important
- Pro tip: Use ctx.save() / ctx.restore() if you’re doing complex clipping + clearing
JavaScript
|
0 1 2 3 4 5 6 7 8 9 |
ctx.save(); ctx.globalCompositeOperation = 'destination-out'; // advanced erase mode ctx.fillRect(100, 100, 200, 200); ctx.restore(); |
Understood Canvas clearRect() fully now? This is one of the most important commands in Canvas — without it, animations become messy, drawings overlap forever, and you can’t “erase” anything.
Tell me what you want next — we can build on this:
- Full animated bouncing ball with clearRect()?
- Mouse eraser / paint app (clear on drag)?
- Loading bar that clears & redraws?
- Canvas with transparent cutouts?
- Or 15-question clearRect() quiz?
Just say — we keep going step by step together! 🚀
