My current solution is to clear the entire canvas and redraw all sprites on every requestFrame(). This works but feels inefficient:
- I only need to clear the part of the canvas made invalid by animations.
- I only need to redraw objects that intersect the invalid part of the canvas.
I can track invalidated sections, and during requestFrame() I can find out which objects intersect an invalid section and redraw only them, but I'm not sure if that's an improvement or a step back. If I have 100 sprites and 10 of them are moving, that means I need to do 10 searches through all 100 sprites. Tall order for every request frame.
I can also put every sprite on its own canvas and remove sprite interaction from the equation, but I haven't been able to find insight into how many canvases is too many.
This seems like a problem that's been solved already, but I haven't found any resources on the topic.