An easy way to optimize the HTML5 canvas element’s clearRect function

April 30th, 2011

One of the main challenges in working with HTML5’s canvas element is really optimizing it because you’re dealing with two unknowns, the processing power of the user’s computer and the speed of their browser’s JavaScript engine. You can never know if they’ll be running an Intel Core i7 or a 6 year old single core. Are they using Chome or Firefox 3.6? One thing we can do quickly and easily, is to use clearRect to only clear the areas we need to instead of the entire canvas. I’ve talked about this before, but I’ve refined how I do it and I think it would be great for developers new to canvas to know this from the start instead of having to discover it on their own.

When I first started working with the canvas element, I would always just use clearRect to clear the entire canvas. That may be necessary in some circumstances, it’s a waste of resources if only a few things are moving around a 500×500 canvas and we’re clearing 250,000 pixels. But if we’re moving 3 blocks around, we don’t want to clear all that and we also don’t want to have to set up individual clearRect functions for each block. The easiest way to do this is to create a function that we can just run for each block.

We would need to pass the function 4 things, the x and y co-ordinates and the width and height of the block we want to clear. So the function would look like this:

1
2
3
function clearCanvas(x,y,w,h) {
  ctx.clearRect(x,y,w,h);
}

To run the function we would write some code like this:

1
2
3
4
clearCanvas(block.x,block.y,block.w,block.h);
block.x += 1;
block.y += 1;
ctx.fillRect(block.x,block.y,block.w,block.h);

If you’ve worked with canvas before then there’s nothing there that you haven’t seen before, but because we’ve created a function to clear the canvas, we can add another block and just pass it’s info to the clearCanvas function:

1
2
3
4
5
6
7
clearCanvas(block.x,block.y,block.w,block.h);
block.x += 1;
block.y += 1;
ctx.fillRect(block.x,block.y,block.w,block.h);
clearCanvas(block2.x,block2.y,block2.w,block2.h);
block2.x += 2;
ctx.fillRect(block2.x,block2.y,block2.w,block2.h);

The browser only has to worry about clearing those two areas which will allow it to focus more resources on the other code you’re running. This will work with any moving object, whether it’s moving on it’s own or the user is controlling it. I’ve created an example on JS Bin.

3 Responses to An easy way to optimize the HTML5 canvas element’s clearRect function

  1. Kyle Simpson says:

    Won’t this create issues if you have anything underneath the objects? Or if the objects ever overlap? Seems like this is a very limited use-case where I only ever have one, non-overlapping “layer” of content in the canvas, right?

    Now, if you’re using layered canvas elements (with transparency), sure, this works fine. But you don’t mention that anywhere in this post.

  2. Mike says:

    You could write a simple if statement to check if the moving element has passed over a stationary one and if it has, redraw that element. If the background is an image that fills the entire canvas, then you wouldn’t even need to clear the canvas, just draw the background first over top of everything and then draw the moving elements on top.

    This wasn’t really meant to solve specific cases, but to get the idea that you don’t have to always clear the entire canvas into the heads of developers that are just starting out with the canvas tag.

  3. this help a lot, Thanks for sharing

Leave a Reply

Your email address will not be published. Required fields are marked *