Chapter 40: Canvas clearRect
Canvas clearRect in the clearest, most patient, step-by-step way possible.
Imagine I’m sitting right next to you with my screen open. We’re going to build understanding together — slowly, with tiny complete examples you can copy-paste and run immediately, visual thinking, common beginner traps, and repeated explanations until it feels completely natural and obvious.
Canvas clearRect – Complete Beginner-to-Confident Guide
1. The single most important sentence you must remember forever
clearRect() is the only normal way to erase (or “clear”) pixels on the canvas.
Canvas is a bitmap painter, not a scene that remembers shapes. Once you draw something (line, circle, text, image…), those pixels are permanently there until you overwrite them or clear them.
There is no “delete shape” command in Canvas like in SVG. If you want something to disappear, move, or change — you usually have to clear the old pixels first and then redraw the new version.
That is why almost every animation starts with:
|
0 1 2 3 4 5 6 |
ctx.clearRect(0, 0, canvas.width, canvas.height); |
2. What clearRect actually does (in plain English)
clearRect(x, y, width, height)
- It erases (sets to transparent black — rgba(0,0,0,0)) all pixels inside the rectangle you specify.
- It does not reset styles (colors, lineWidth, etc.) — only the pixels.
- It is very fast — much faster than drawing a big white rectangle over everything.
Important gotcha If your canvas has a CSS background-color or you set canvas.style.background, clearRect will show that background in the cleared area.
But if you never set any background, cleared areas become fully transparent (you see whatever is behind the <canvas> element).
3. Minimal complete example – see clearRect in action
Copy-paste and run this — click the button to see what happens.
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas – clearRect Explained</title> <style> canvas { border: 2px solid #333; background: #e3f2fd; display: block; margin: 40px auto; } button { display: block; margin: 20px auto; padding: 12px 24px; font-size: 18px; } </style> </head> <body> <canvas id="c" width="600" height="400"></canvas> <button id="draw">Draw colorful stuff</button> <button id="clear">Clear everything</button> <button id="partial">Clear only center</button> <script> const canvas = document.getElementById('c'); const ctx = canvas.getContext('2d'); // Initial message ctx.font = 'bold 32px Arial'; ctx.fillStyle = '#333'; ctx.textAlign = 'center'; ctx.fillText('Click buttons to see clearRect', 300, 200); // Draw button document.getElementById('draw').onclick = () => { ctx.fillStyle = '#4CAF50'; ctx.fillRect(80, 80, 200, 120); ctx.fillStyle = '#2196F3'; ctx.beginPath(); ctx.arc(450, 180, 80, 0, Math.PI*2); ctx.fill(); ctx.fillStyle = '#F44336'; ctx.fillRect(200, 280, 180, 100); ctx.fillStyle = '#333'; ctx.font = 'bold 28px Arial'; ctx.fillText('Drawn shapes', 300, 60); }; // Full clear button document.getElementById('clear').onclick = () => { ctx.clearRect(0, 0, canvas.width, canvas.height); }; // Partial clear button – only center area document.getElementById('partial').onclick = () => { ctx.clearRect(150, 100, 300, 200); // x=150, y=100, width=300, height=200 }; </script> </body> </html> |
What you should try right now:
- Click “Draw colorful stuff” → see three shapes appear
- Click “Clear everything” → whole canvas goes back to light blue (CSS background)
- Draw again → then click “Clear only center” → only the middle 300×200 area disappears
Key lessons from this example:
- clearRect(0, 0, canvas.width, canvas.height) → full erase
- clearRect(x, y, w, h) → erase only a rectangular region
- Clearing shows whatever is behind (CSS background or transparent)
- Clearing does not reset colors, fonts, lineWidth — state remains
4. Common clearRect patterns you will use every day
Pattern 1 – Full clear every frame (animation)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); // erase old frame // update positions ball.x += ball.vx; // draw new frame ctx.beginPath(); ctx.arc(ball.x, ball.y, 30, 0, Math.PI*2); ctx.fill(); requestAnimationFrame(animate); } |
Pattern 2 – Fade trail effect (partial clear)
Instead of full clear → draw semi-transparent black rectangle:
|
0 1 2 3 4 5 6 7 |
ctx.fillStyle = 'rgba(0,0,0,0.05)'; // very transparent black ctx.fillRect(0, 0, canvas.width, canvas.height); // fade whole canvas |
→ Old drawings slowly fade away — new ones stay bright.
Pattern 3 – Erase only one object (advanced)
You calculate the bounding box of the old object and clear only there:
|
0 1 2 3 4 5 6 7 |
// Before moving ball ctx.clearRect(oldX-35, oldY-35, 70, 70); // slightly larger than radius |
5. Common beginner traps & how to avoid them
Trap 1 “I cleared but the old shapes are still there!”
→ You probably forgot to clear the full area or used wrong coordinates.
Trap 2 “After clearRect my colors / lineWidth changed!”
→ No — clearRect never changes state. It only erases pixels — fillStyle, lineWidth, etc. stay the same.
Trap 3 “Canvas becomes transparent after clearRect”
→ Normal behavior — if no CSS background is set, cleared pixels are transparent.
Fix — add CSS background:
|
0 1 2 3 4 5 6 |
canvas { background: white; } |
or paint a background rectangle once:
|
0 1 2 3 4 5 6 7 |
ctx.fillStyle = 'white'; ctx.fillRect(0, 0, canvas.width, canvas.height); |
6. Your three tiny practice tasks (10–15 minutes each)
Task 1 – Clear button Draw a red circle in the center Add a button that says “Erase circle” → when clicked, clear only the circle area (not whole canvas)
Task 2 – Fade trail Make a small blue circle move across the canvas (use animation loop) Instead of full clear → use semi-transparent black fillRect to create a fading trail
Task 3 – Selective erase Draw three colored rectangles Add three buttons — each erases only one rectangle (calculate its bounding box)
Paste any of them here when you finish — I’ll review it like we’re pair-programming together.
Which part still feels a little fuzzy?
- Why we need to clear every frame in animation?
- Difference between full clear vs partial clear?
- Why cleared areas become transparent?
- How to make a fading trail without full clear?
- Something else?
Tell me — we’ll stay on clearRect until you feel super confident using it in any situation.
You’re doing really well — mastering clearRect is one of the biggest “aha” moments in Canvas! 🚀
