How to clear a canvas tag

Written by Richard Heyes, on 12th April 2013

A guide explaining the different ways that you can clear a canvas tag. For example clearRect(), setting the canvas dimensions, composite operations - they all have their own advantages and disadvantages and this article explains them to you.


There a few ways to clear your canvas and at first they all appear to do the same thing. However there are subtle differences that can have a big impact on your canvas and what happens in your application. Here's a description of the different ways that you can use.

The clearRect() function

The first is the clearRect() function. This behaves much like the fillRect() and strokeRect() functions except that instead of drawing a new rectangle on to the canvas it clears the area that you specify so that it is returned to transparency.

context.clearRect(0, 0, canvas.width, canvas.height);

Setting the width or height

When you assign a value to the width or height properties through JavaScript it has the side effect of resetting the canvas. So, similarly to the clearRect() function, this means that the canvas is returned to transparency.


If you use this method to clear your canvas you need to note that by using this method any transformation that has been performed will also be reset. In the RGraph libraries for example sharp pixels with no anti-aliasing are achieved by translating the canvas by half a pixel in both the X and Y directions and then always drawing lines and shapes using whole numbers. If the transformation is reset the anti-aliasing fix must be reapplied to maintain the sharp appearance.

canvas.width = canvas.width;

The fillRect() function

If you're happy to simply clear the canvas to a white color instead of returning it to transparency then you can use the fillRect() function to cover the canvas with a white (or any color you choose) rectangle. If you don't have a CSS background-image set and the background-color of the page is also white then you probably won't notice the difference. This method doesn't change the transformation matrix so any transformation that you have applied (eg a scale, translate, skew or rotate) will not be affected.

Instead of using this method you might want to opt for the clearRect() method though which is very similar and has the advantage that the canvas is returned to transparency. Though if that's not what you want - and instead you want a colored background - choose this method.

context.fillStyle = 'white';
context.fillRect(0, 0, canvas.width, canvas.height);

The rect() function

This method is very similar to the above method except that more code is required - so you might as well ignore this method.

context.fillStyle = 'white';
context.rect(0, 0,canvas.width, canvas.height);

Using the globalCompositeOperation option

This method has the same effect as the clearRect() function described above. It involves setting the globalCompositeOperation to source-in and then drawing a rectangle over the whole of the canvas. Because of the globalCompositeOperation setting the canvas will actually be returned to transparency. This method is more-or-less the same as the clearRect() method - though it may be slower - so you might as well use the clearRect() option.

context.globalCompositeOperation = 'source-in';
context.fillStyle = 'rgba(0,0,0,0)';