How to clear a canvas tag

Recommend RGraph:  
    Read comments... Posted on 12th April 2013

Summary
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.

Introduction

There a few ways to clear your canvas and at first they all appear to do the same thind. 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 behves much like the fillRect and strokeRect functions except that tinstead 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 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 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 dpn'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, transform 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 isvery 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 affect 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 globalComposieOperation 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);

Comments