html5 clearrect,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);

HTML5 Canvas not supported

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);