HTML Canvas clearRect() Method
The clearRect() Method
The clearRect()
method is
used to clear a rectangular area of the canvas. The cleared rectangle is
transparent.
The clearRect()
method has the following parameters:
Parameter | Description |
---|---|
x | Required. The x-coordinate of the upper-left corner of the rectangle |
y | Required. The y-coordinate of the upper-left corner of the rectangle |
width | Required. The width of the rectangle, in pixels |
height | Required. The height of the rectangle, in pixels |
Example
Use
fillRect()
to draw a filled 150*100 pixels rectangle, starting in position (10,10).
Then use
clearRect()
to clear a rectangular area in the canvas:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "pink";
ctx.fillRect(10,10, 150,100);
ctx.clearRect(60,35, 50,50);
</script>
Try it Yourself »
Example
Here the cleared rectangle goes outside the pink rectangle:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "pink";
ctx.fillRect(10,10, 150,100);
ctx.clearRect(60,35, 150,50);
</script>
Try it Yourself »
Example
Here we use the
clearRect()
method to clear a rectangular area in a stroked rectangle:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "blue";
ctx.strokeRect(10,10, 150,100);
ctx.clearRect(60,35, 150,50);
</script>
Try it Yourself »