I was wondering if there are any benchmarks or clues about whether its better to draw one large image or call drawImage more often for fewer images.

Example:

I have a canvas of ~1600x1000 (when Fullscreen) and an Image that size. I draw this image onto my canvas each frame (hence I can save ctx.clearRect()). It has about 6 objects that I could easily draw each on its own in multiple drawImage-calls, but I'd need to do clearRect(); every frame.

Which is better in terms of performance?

I was wondering if there are any benchmarks or clues about whether its better to draw one large image or call drawImage more often for fewer images.

Example:

I have a canvas of ~1600x1000 (when Fullscreen) and an Image that size. I draw this image onto my canvas each frame (hence I can save ctx.clearRect()). It has about 6 objects that I could easily draw each on its own in multiple drawImage-calls, but I'd need to do clearRect(); every frame.

Which is better in terms of performance?

• javascript
• canvas
• html5-canvas
• performance

Share Improve this question Follow edited Dec 13, 2012 at 12:45 Xavi López 27.9k1111 gold badges9999 silver badges163163 bronze badges asked Dec 13, 2012 at 12:00 nocksocknocksock 5,53766 gold badges4141 silver badges6666 bronze badges 2

• Can you post screenshots of the 6 objects and / or the full canvas? If the 6 objects are tiny, there's a chance that it might be faster. If they cover the canvas, together, then a single call will probably be faster – Cerbrus Commented Dec 13, 2012 at 12:03
• 1 use layered canvases if your background doesn't change. See here : html5rocks./en/tutorials/canvas/performance look for "use multiple layered canvases for plex scenes" – GameAlchemist Commented Dec 13, 2012 at 12:21

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Drawing a few larger images will perform better than many small images.

It's the actual drawImage that causes the performance hit. Calling this the least number of times will yield better performace.

As per the ments, it's likely you will have better performance using multiple canvases. It really does depend what you're trying to achieve before determining if this is actually necessary. If we're just talking 6 images, I probably wouldn't go to crazy but it's reasonable to have a canvas for the background (which is drawn once and you don't clear) and another for the other objects.

Do some testing, I've found that performance of the canvas varies depending on what specifically you're trying to do, but there are some general rules which you have to balance

-The fewer drawImage calls the better

-The smaller the area you're drawing the better

-drawing a whole image without slicing a piece out or scaling it is fastest

-the more transformations you apply to the canvas the slower it will be

So it really depends on your situation. If you're drawing 6 10x10 squares out your whole 1000x1600 image it's probably worth it to just draw the smaller pieces, but if you've got to cut them out of the larger image (using drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)) you may find it's still faster to draw the large image. There's not really a "best way" you've just got to test different things out.