HTML5 Canvas: clearRect()

Jakob Jenkov
Last update: 2014-06-15

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

Jakob Jenkov

Featured Videos

Core Software Performance Optimization Principles


Java Persistence
Close TOC

All Trails

Trail TOC

Page TOC