Is there a quick and efficient way to move lots of objects in canvas? Basically if there are around 1000 objects and I want to move all of them at once to emulate scrolling, it is very slow to redraw every single object by calling drawImage() 1000+ times.
Is there anyway to optimize this? I have an example link of the problem (and that’s only with 100 objects): http://craftyjs.com/isometric/
You can draw all objects on a second, off-screen canvas and then only blit the whole canvas (
drawImage()accepts canvas element).However, if you’re targeting desktop browsers, then this shouldn’t be necessary. I’ve implemented tile engine (source) that simply redraws whole scene and naive implementation turned out to be pretty fast.