Question

I’m in the process of building a canvas-based game that will involve a fair number of sprites overlapping each other while in motion. I’m targeting mobile devices, so performance is a concern.

In my case, there are basically two ways to go about animating the sprites on the canvas:

1. Erase the entire canvas on every frame on which at least one sprite has moved/changed and redraw everything. This sounds pretty standard, from what I’ve seen.
2. Erase only those sprites that have moved/changed and redraw only those sprites that have moved/changed and those sprites which overlap those sprites which have moved/changed. Erasing those sprites which have moved/changed will cut chunks out of those sprites which they overlap, so the overlapped sprites will need to be redrawn.

Naively, it sounds like the second option would yield better performance. Less draw operations equals less work that the machine has to do, right? However, whereas the first option would involve (potentially) one clearRect() invocation per frame, the second would involve many clearRect() invocations per frame (albeit each one for a significantly smaller rectangle.) And that’s not to mention the overhead of determining what needs to be erased and what overlaps what was just erased.

So, after a bit of reflection, I’m not sure which would be faster. I’m certain there are situations where the second would be faster, and I’d imagine there are situations where the first option would be faster.

Are there ways to determine now which would be the faster option? Or is my best bet to implement it both ways and do some benchmarking?

Answer 1

I’ve dealt with this same issue on a smaller scale and had a head-slapping moment when I realized you can separate out the different drawn elements onto different canvases that overlap each other!

One canvas for background, one for character sprites, etc.etc.

Checkout the answer to this question for a full framework for handling this style of drawing.