CanvasRenderingContext2D.clearRect()

The Official Description

The CanvasRenderingContext2D.clearRect() method of the Canvas 2D API sets all pixels in the rectangle defined by starting point (x, y) and size (width, height) to transparent black, erasing any previously drawn content

Visual1

Why Would I Use This?

clearRect() allows you to clear areas of the canvas.

clearRect() is often used when running animations to clear the canvas between frames of animation. This example demonstrates how clearRect() is used in a simple animation.

Editor (write code below)
var canvas = document.getElementById('clear_rect_interactive1'); var context = canvas.getContext('2d'); if (window.animation) clearTimeout(window.animation); context.save(); context.clearRect(0, 0, canvas.width, canvas.height); var boxX = 0; var boxY = 0; var boxCommandQueue = []; function setLoopInstructions() { boxX = 50; boxY = 50; moveBox(1, 0, 100); moveBox(1, 1, 200); moveBox(-1, 0, 100); moveBox(-1, -1, 100); moveBox(0, 1, 100); moveBox(1, -1, 200); moveBox(-1, 0, 300); } function runAnimation() { if (boxCommandQueue.length > 0) { context.clearRect(0, 0, canvas.width, canvas.height); var command = boxCommandQueue.shift(); drawBox(command[0], command[1]); } else { setLoopInstructions(); } window.animation = setTimeout(runAnimation, 10); } function moveBox(xShift, yShift, steps) { for (var i=0; i < steps; ++i) { boxCommandQueue.push([xShift, yShift]); } } function drawBox(xShift, yShift) { boxX += xShift; boxY += yShift; context.fillRect(boxX, boxY, 25, 25); } drawBox(0, 0); runAnimation(); context.restore();
Message Log
This is a lesson, not a challenge, the code runs automatically.

But change it! Play with it! Click "Run" to see your changes.

Run
Run and Focus Canvas
Reset
Canvas (your drawing will display here)

Challenge 1

Use clear_rect() to clear a space that is 25 wide and 100 tall starting at x = 100, y=100;

Editor (write code below)
var canvas = document.getElementById('clear_rect_challenge1'); var context = canvas.getContext('2d'); context.save(); context.fillStyle = 'red'; context.fillRect(0, 0, canvas.width, canvas.height); // YOUR CODE TO CLEAR A RECTANGLE HERE. context.restore();
Message Log
This is a lesson, not a challenge, the code runs automatically.

But change it! Play with it! Click "Run" to see your changes.

Run
Run and Focus Canvas
Reset
Canvas (your drawing will display here)

Challenge 2

Use clear_rect() to clear the whole canvas. The canvas width can be determined by calling "canvas.width" and the height by calling "canvas.height".

Editor (write code below)
var canvas = document.getElementById('clear_rect_challenge2'); var context = canvas.getContext('2d'); context.clearRect(0, 0, canvas.width, canvas.height); context.save(); context.fillStyle = 'green'; context.fillRect(0, 0, canvas.width, canvas.height); // YOUR CODE TO CLEAR THE CANVAS HERE. context.restore();
Message Log
This is a lesson, not a challenge, the code runs automatically.

But change it! Play with it! Click "Run" to see your changes.

Run
Run and Focus Canvas
Reset
Canvas (your drawing will display here)

Ready for the next lesson?

Next up, the "fillRect()" lesson >