1. HTML5 Canvas Tutorial
2. HTML5 Canvas Overview
3. HTML5 Canvas: Stroke and Fill
4. HTML5 Canvas: Rectangles
5. HTML5 Canvas: clearRect()
6. HTML5 Canvas: Paths
7. HTML5 Canvas: Gradients
8. HTML5 Canvas: Shadows
9. HTML5 Canvas: Text
10. HTML5 Canvas: Images
11. HTML5 Canvas: Composition
12. HTML5 Canvas: Transformations
13. HTML5 Canvas: State + State Stack
14. HTML5 Canvas: toDataURL()
15. HTML5 Canvas: Pixel Manipulation
16. HTML5 Canvas: Animation

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