Improving Canvas Performance

1. Timeout instead of Scheduler

Surprisingly, using seems much faster then relying on I did not yet evaluate the differences in detail but the lower CPU workload speaks for itself.

2. AnimationScheduler

I am not really sure if this helps a lot, but you will find a lot of online documentation explaining that you should use this: requestAnimationFrame(callback, element);. The element parameter is optional but said to improve performance as the browser can decide when to render optimally.
So whenever your timer kicks in, and you are ready to render the results, use the AnimationScheduler instead of calling your rendering routines right away. It will only take very few milliseconds (depending on the users screen frame rate—which is 60 Hz or more usually) for the callback to return to your code.

3. Caching

This parts requires much more effort and depends on your software architecture and requirements. The basic idea is not to redraw things that did not change. To do so we can draw each item on a hidden canvas once and then reuse this rendering during every drawing cycle.
As the process is a bit more complicated, I will dedicate it a separate post—comming soon!

4. Save on effects

Yes, effects is what the canvas is all about, but something like a shadow can cost quite some CPU power. So if you run into problems check if some of the effects can be achieved cheaper or even be removed.

Leave a Reply

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