timing practices for multiple html5 canvas elements on web page

I have found some articles on using request animation frames for animating html5 canvas elements. http://paulirish.com/2011/requestanimationframe-for-smart-animat开发者_运维知识库ing/

If I were to have multiple elements, should I have a timing system for each of them individually (a separate script) or should I have them all within a single loop?

This is for a magazine concept, wherein you may have each 'page' with a different animation (one a series of lines, another a wave, perhaps another that disintegrates an image before your eyes as you read the text)

any help is always appreciated.

I assume that you will develop each animations separately, and further these animations are not related with each other. In such case you not at all need for synchronization... If you go for sync them up in one loop, you will have following problems...

• If animation in one canvas is slow, animation in other canvas will have to unnecessarily wait...
• requestAnimationFrame help you create intelligent loop, ie if your canvas in hidden or your tab is not active, callback will not occur for canvas. In case of syncing, you will not be able to optimize fully.
  • It will be more complex to manage all the animation in one loop rather then individual loop.
• While debugging, you may come across problems caused by other animations in the page...

So if your animations are not related, I highly recommend not to sync the animations with one loop. Hope this answers your questions.

Following link will help you learn more about Html5 Canvas...

• http://www.technobits.net/articles/13730/improving-html5-canvas-performance/
• http://www.technobits.net/search/page-1/?q=%22html5%20canvas%22

That's entirely up to you. Do you want the elements to run in sync with each other or not? Or does it not matter?

If its doesn't matter or if you need them synced, keep them all in one loop with one timer. It's probably faster on every browser and it will be easier to debug, maintain, and understand the code.

If they shouldn't be synced up then of course you must have two timers! Also, if you feel in the future you might want different parts to run at distinctly different or changing speeds, then you might want to consider two timers.