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

Java ForkJoinPool

P2P Networks Introduction


Java Persistence
Close TOC
All Tutorial Trails
All Trails
Table of contents (TOC) for this tutorial trail
Trail TOC
Table of contents (TOC) for this tutorial
Page TOC
Previous tutorial in this tutorial trail
Next tutorial in this tutorial trail