How to Clear HTML5 Canvas for Redrawing in JavaScript

HTML5 technology provides canvas element that allows you to easily draw graphics and animations in web browser. Often web developers use canvas for drawing simple as well as complex drawings on their web pages. But if you want to redraw things on your canvas you will need to clear the canvas. Many beginner web developers try to create a new canvas or background instead. If you want to redraw images on the same canvas, it is advisable to clear canvas. In this article, we will learn how to clear HTML5 canvas for redrawing in JavaScript.

HTML5 Clear vs New Canvas

While creating images and animations, often web developers need to clear canvas to draw something else. In such cases, it is tempting to completely remove or reset the original canvas element and draw a new canvas from start. This can pose many problems. First of all, it is important to understand that even canvas element has a lot of state variables such as fillColor, strokeStyle, transformations, etc. When we delete a canvas a draw a new one, all these states will be reset. It can be difficult to recover all of them in your new canvas. Secondly, if your canvas element has a lot of data, then it will take a lot of time to redraw a new canvas. Thirdly, drawing a new canvas will also remove other HTML5 elements such as lines, curves, etc. which you may need indeed.

In most cases, all you need to do is clear the canvas rectangle while preserving most of the other information. Therefore, it is much better to simply clear the canvas element on your web page.

How to Clear HTML5 Canvas for Redrawing in JavaScript

Let us say you have the following HTML canvas element on your web page.

<canvas id="myCanvas" width="200" height="100"></canvas>

First, we will get hold of the canvas by its ID using getElementById() function.

var canvas = document.getElementById("myCanvas");

Next, we will retrieve its context, which contains all information about its present settings.

var context = canvas.getContext("2d");

There are mainly 3 ways to clear HTML5 canvas. Let us look at them one by one.

1. Using ClearRect() Method

The clearRect() method is available by default for each canvas element. You can call it to clear a rectangular area of canvas. You need to specify the top-left corner coordinates, along with the height and width of the same. Here is the syntax of clearRect() function.

context.clearRect(x, y, width, height)

Here we call clearRect() function on this context to clear the rectangle.

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

Please note, the above code will only clear the rectangle and nothing else. It will not clear any drawings you have done inside the rectangle. For this purpose, you will need to call beginPath() function.

context.beginPath();

To summarize, here is the JavaScript code to clear an HTML canvas.

<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
</script>

2. Using Width/Height Properties

The above approach is very fast but does not preserve strokStyle, fillStyle, etc. But if you have used beginPath before drawing your canvas, you can also use the following commands to clear it. Basically, in this case, we are simply setting them to their current values. This will create a new canvas element at the same spot as the old one with the same width and height as the old one.

context.canvas.width = context.canvas.width;
OR
context.canvas.height = context.canvas.height;

You do not need to reset both dimensions of canvas, resetting one will do.

Please note: But this approach resets all canvas states like strokeStyle, fillStyle to black and can be a bit slow. Also it may not work on all web browsers.

3. Using fillStyle & fillRect()

In this solution, we use fillStyle property of canvas to set the fill color to a transparent color and then use fillRect() method to fill the rectangle with the transparent color.

Here is the syntax of fillRect() function.

context.fillRect(x, y, width, height)

Here is an example where we set the fillStyle to transparent color using rgba() function.

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

Conclusion

If you are using HTML5 canvas element, then you will invariably need to clear it sometime or the other. In this article, we have learnt how to clear canvas rectangle using clearRect() as well as by resetting its width/height properties. Although there are several ways to clear HTML canvas, using clearRect() is one of the fastest ways to do it, in most use cases. Resetting canvas dimensions is useful if your canvas changes dynamically and frequently.

Also read:

How to Use Decimal Step Value for Range in Python
How to Get Browser Viewport Dimensions in JS
How to Auto Resize TextArea to Fit Text
How to Render HTML in Text Area
How to Install PuTTy on Linux