How to clear a canvas tagWritten 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.
- The clearRect function
- Setting the width or height
- The fillRect function
- The rect function
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
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();
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);