Improving Canvas Performance

1. Timeout instead of Scheduler

Sur­pris­ing­ly, using seems much faster then rely­ing on I did not yet eval­u­ate the dif­fer­ences in detail but the low­er CPU work­load speaks for itself.

2. AnimationScheduler

I am not real­ly sure if this helps a lot, but you will find a lot of online doc­u­men­ta­tion explain­ing that you should use this: requestAnimationFrame(callback, element);. The ele­ment para­me­ter is option­al but said to improve per­for­mance as the browser can decide when to ren­der opti­mal­ly.
So when­ev­er your timer kicks in, and you are ready to ren­der the results, use the Ani­ma­tion­Sched­uler instead of call­ing your ren­der­ing rou­ti­nes right away. It will only take very few mil­lisec­onds (depend­ing on the users screen frame rate—which is 60 Hz or more usu­al­ly) for the call­back to return to your code.

3. Caching

This parts requires much more effort and depends on your soft­ware archi­tec­ture and require­ments. The basic idea is not to redraw things that did not change. To do so we can draw each item on a hid­den can­vas once and then reuse this ren­der­ing dur­ing every draw­ing cycle.
As the process is a bit more com­pli­cat­ed, I will ded­i­cate it a sep­a­rate post—comming soon!

4. Save on effects

Yes, effects is what the can­vas is all about, but some­thing like a shad­ow can cost quite some CPU pow­er. So if you run into prob­lems check if some of the effects can be achieved cheap­er or even be removed.

Leave a Reply

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