HTML

How to Clear an HTML Canvas

Sponsor

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.

Last Updated Thursday, 10 March 2022
Johnny Simpson
Johnny Simpson

Subscribe for Daily Dev Tips

Subscribe to our weekly newsletter, to stay up to date with our latest web development and software engineering posts via email. You can opt out at any time.

Not a valid email