Different methods that you can use to clear your canvas tag

• Introduction
• The clearRect function
• Setting the width or height
• The fillRect function
• The rect function
• Using globalCompositeOperation

Introduction

There are a number of different 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 returns to transparency.

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

An advantage with this method is that it doesn't have to be the whole of the canvas tag that you clear - it can just be a smaller area of it.

Setting the width or height

When you assign a value to the width or height poperties 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.

Note

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 antialiasing 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 antialiasing 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 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.beginPath();
context.fillStyle = 'white';
context.rect(0, 0,canvas.width, canvas.height);
context.fill();

Using globalCompositeOperation

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 may be slower - so you might as well use the clearRect option.

context.globalCompositeOperation = 'source-in';
context.fillStyle = 'rgba(0,0,0,0)';
context.fillRect(0,0,canvas.width,canvas.height);