HTML Canvas clearRect() Method
The clearRect() Method
TheclearRect() method is used to clear a rectangular area of the canvas. The cleared rectangle is transparent.
TheclearRect() 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
UsefillRect() to draw a filled 150*100 pixels rectangle, starting in position (10,10). Then useclearRect() 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 »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>
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 »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>
Example
Here we use theclearRect() 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 »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>
