Canvas clearRect() Method
Example
Clear a rectangle on the canvas:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 200, 100);
ctx.clearRect(40, 40, 50, 50);
Try it Yourself »
Description
The clearRect() method clears specified pixels on the canvas.
The clearRect() method does not change the current path.
The cleared area is set to tranparent rgba(0,0,0,0).
Note
Always call beginPath() before drawing after clearRect().
See Also:
The fillStyle Property (Set a fill color or pattern)
The fillRect() Method (Draw a filled rectangle)
The strokeRect() Method (Draw a rectangle)
The rect() Method (Add a rectangle to the path)
Syntax
| context.clearRect(x, y, width, height) |
Param Values
| Param | Description | Play it |
|---|---|---|
| x | The x-coordinate of the upper-left corner of the rectangle | Play it » |
| y | The y-coordinate of the upper-left corner of the rectangle | Play it » |
| width | The width of the rectangle to clear in pixels | Play it » |
| height | The height of the rectangle to clear in pixels | Play it » |
Return Value
| NONE |
Browser Support
The <canvas> element is an HTML5 standard (2014).
clearRect() is supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | 9-11 |
❮ Canvas Reference
