Canvas clearRect(): Clear Part or All of a Canvas
The Canvas clearRect(x, y, width, height) method erases pixels inside a rectangular area. The cleared pixels become transparent, revealing the canvas background or anything behind the canvas element.
Use it to erase part of a drawing, clear the whole canvas before redrawing, or remove a rectangular region during an animation or interactive update.
Basic clearRect() example Top ↑
<canvas id="my_canvas" width="400" height="180"></canvas>
<script>
const canvas = document.getElementById('my_canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#0d6efd';
ctx.fillRect(20, 20, 220, 100);
// Erase a 70 x 50 area from the filled rectangle
ctx.clearRect(60, 45, 70, 50);
</script>clearRect() syntax and parameters Top ↑
ctx.clearRect(x, y, width, height);| Parameter | Meaning |
|---|---|
x | Horizontal coordinate of the rectangle's starting point. |
y | Vertical coordinate of the rectangle's starting point. |
width | Width of the area to clear. Positive values extend right; negative values extend left. |
height | Height of the area to clear. Positive values extend down; negative values extend up. |
clearRect() paints nothing visible. It makes the selected pixels transparent.
Interactive clearRect() demo Top ↑
Move the controls to change the X position, Y position, width and height of the erased area. Use Fill Again to restore the dark background before experimenting again.
How to clear the entire canvas Top ↑
Use the canvas element's drawing-buffer dimensions as the width and height:
ctx.clearRect(0, 0, canvas.width, canvas.height);This is common before drawing the next frame of an animation or when rebuilding a scene from scratch.
Does clearRect() affect the current path? Top ↑
clearRect() erases pixels directly; you do not need beginPath(), stroke() or fill() to make it work.
// No beginPath() or stroke() is required for the erase itself
ctx.clearRect(20, 20, 80, 50);If you start drawing a new path after clearing, call beginPath() when you want that new path separated from previously defined subpaths.
clearRect() does not reset Canvas state Top ↑
Clearing pixels does not restore drawing settings such as fillStyle, strokeStyle, lineWidth, shadows, clipping, or transformations. Those settings remain in the 2D context until you change or restore them.
ctx.fillStyle = 'red';
ctx.clearRect(0, 0, canvas.width, canvas.height);
// fillStyle is still red
ctx.fillRect(20, 20, 100, 60);If your goal is to clear the bitmap and return the 2D context to its default drawing state, modern browsers also provide ctx.reset(). For ordinary erasing, clearRect() remains the focused method.
Negative width and height Top ↑
Negative dimensions are valid. A negative width clears to the left of x, and a negative height clears upward from y.
ctx.clearRect(220, 130, -100, -60);clearRect(), fillRect(), strokeRect() and rect() Top ↑
| Method | Use |
|---|---|
clearRect() | Erases pixels in a rectangular area by making them transparent. |
fillRect() | Immediately draws a filled rectangle. |
strokeRect() | Immediately draws a rectangle outline. |
rect() | Adds a rectangle to the current path for later filling or stroking. |
Accessibility note Top ↑
Canvas pixels are not automatically exposed as structured content. If clearing or revealing part of a drawing changes information that users need, provide the same state or result through accessible HTML, text, controls, or another suitable alternative.
Common clearRect() mistakes Top ↑
- Calling
stroke()afterclearRect()and expecting it to perform the erase. - Using
beginPath()as though it were required byclearRect(). - Using CSS width and height instead of the canvas drawing-buffer
widthandheightwhen clearing the whole canvas. - Expecting
clearRect()to reset colors, line settings, shadows, transforms or clipping. - Painting a background color over the area when the requirement is true transparency.
Frequently asked questions Top ↑
What is the syntax of Canvas clearRect()? Top ↑
The syntax is ctx.clearRect(x, y, width, height).
How do I clear the whole HTML canvas? Top ↑
Use ctx.clearRect(0, 0, canvas.width, canvas.height) when the context is using its normal coordinate system.
Does clearRect() make the area white? Top ↑
No. It makes the pixels transparent. A white result appears only when the canvas or page background behind those pixels is white.
Does clearRect() reset fillStyle or strokeStyle? Top ↑
No. It clears pixels without resetting the rest of the Canvas 2D drawing state.
Do I need beginPath() before clearRect()? Top ↑
No. The erase itself is immediate. Use beginPath() when starting a new path that should be independent of previously defined path segments.
Related Canvas tutorials Top ↑
Canvas tutorial | fillRect() | strokeRect() | rect() | moveTo() | lineTo()
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
