HTML5 Canvas clear the canvas

HTML5 Usage of Canvas clearRect()2The D context function clearRect() is used to clear the rectangle on the canvas. The cleared rectangle becomes transparent.

Online Example

2The D context function clearRect() is used to clear the rectangle on the canvas. The cleared rectangle becomes transparent. Here is a code example:

<canvas id="ex1" width="500" height="150" style="border:　1px solid #cccccc;">　　　　
HTML5　Canvas not supported　　　　
</canvas>　　　　
<script>　　　　
var canvas = document.getElementById("ex1");　　　　
2d');　　　　
context.fillStyle = "#ff0000";　　　　
context.fillRect(10,10,　100,100);　　　　
context.strokeStyle = "#0000ff";　　　　
context.strokeRect(30,20,　120,　110);　　　　
context.clearRect(50,　30,　110,　35);　　　　　　　　　
</script>

Please note how the rectangle is cleared in the red and blue rectangles.
As mentioned earlier, the area cleared using clearRect() becomes transparent. If the canvas element is placed on top of another element, the content of that element will be visible through the cleared area.

clearRect(x, y, width, height)

Just like drawing a rectangle, pass the4The parameters of clearRect() represent the top-left corner of the rectangle to be cleared, as well as the width and height of the rectangle to be cleared.
Here is a more explicit example:

var x =　50;
var y =　30;
var width =　110;
var height =　25;
context.clearRect(x, y, width, height);