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.
- Setting the width or height
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
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
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
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 the globalCompositeOperation option
This method has the same effect as the
clearRect() function described above.
It involves setting the
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
clearRect() method - though it may be slower - so you might as well use
context.globalCompositeOperation = 'source-in'; context.fillStyle = 'rgba(0,0,0,0)'; context.fillRect(0,0,canvas.width,canvas.height);