HTML5 Canvas: clearRect()
The 2D Context function
clearRect() is used to clear a rectangle of the canvas. The cleared
rectangle becomes transparent. Here is a code example:
var canvas = document.getElementById("ex1"); var context = canvas.getContext("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);
Notice how a rectangle of the red and blue rectangles is now cleared.
As mentioned earlier, the cleared using
clearRect() area becomes transparent. In case the canvas element had
been layered ontop of another element, the contents of that element would have been visible
through the cleared area.
clearRect(x, y, width, height)
Just like when drawing a rectangle, the 4 parameters passed to
clearRect() represents the
upper left corner of the rectangle to clear, and the width and height of the rectangle to clear.
Here is a somewhat more explicit example:
var x = 50; var y = 30; var width = 110; var height = 25; context.clearRect(x, y, width, height);