How to clear an HTML Canvas

When we've created a canvas, sometimes we'll want to clear it completely before redrawing something else. Let's look at how to do that.

How to clear HTML Canvas for Redrawing

Let's say we have a canvas, and we've already written code like this:

let myCanvas = document.getElementById('myCanvas');
let ctx = myCanvas.getContext('2d');

If we want to clear the entire canvas and leave it blank, we use clearRect(). clearRect has the 4 arguments - x, y, width and height.

If we want to clear a canvas entirely, starting at (0, 0), our code looks like this:

let myCanvas = document.getElementById('myCanvas');
let ctx = myCanvas.getContext('2d');

ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);

Although we can clear different areas if we want. The below code clears a canvas starting at the xy coordinates (150, 150), and only clearing 100px by 150px (width by height) of content:

let myCanvas = document.getElementById('myCanvas');
let ctx = myCanvas.getContext('2d');

ctx.clearRect(150, 150, 100, 150);

Clearing a HTML Canvas with a Custom Color

To clear a canvas with a custom color, you can instead use the normal rect() function, with a custom color. That looks like this:

let myCanvas = document.getElementById('myCanvas');
let ctx = myCanvas.getContext('2d');

ctx.rect(0, 0, myCanvas.width, myCanvas.height);
// Fill our rectangle
ctx.fillStyle = 'red';
ctx.fill();

The above code will clear our canvas and fill it with red instead.