Optimizing Animations on Canvas 4.62 http://spkr8.com/t/8516

Description:

Native browser features like CSS animations and Canvas have enabled us to deliver rich, engaging experiences without the annoying plugin. However, there is a wide performance gap between the various desktop browsers, and it only gets wider when you consider tablet and phone browsers. In this session, Glenn Barnett will share lessons learned in game development using Canvas, Inline SVG and CSS3, targeting both tablet and desktop clients. Topics include: * Setting up the basic animation loop * Canvas fundamentals * Canvas performance pitfalls and optimizations * How reordering and simplifying your canvas drawing routines can increase your frame rate * What canvas operations to avoid at all costs * When and why to bring in a second, third, or fourth canvas * CPU-efficient canvas graphical effects and tricks * How to leverage hardware acceleration for off-canvas animations * Inline SVG animations with jQuery

Comments on this Talk

Sq_700k bobholt, 03 Oct 01:07 AM

With canvas, reading the spec or following a tutorial gets the basics out of the way, but the super-awesome demos on the web seem out-of-reach. This presentation not only bridged the gap to show that doing great things is well within reach, but showed useful techniques in development and optimization of canvas animations.

Open-uri20111003-13464-1aq2qcb-0 Bob Moore , 03 Oct 02:15 AM

Inspiring! Really awesome demos. Looking forward to studying and experimenting further with canvas and animations.

Barnett_g-28 Glenn Barnett, 03 Oct 06:43 PM

Thanks for the feedback, all. Sorry about the quality of the projector; it didn't really do the canvas justice!

The deck and embedded demos / source code is available here: http://goo.gl/MZBJt

Avatar-missing-icon-05 pedroha, 04 Oct 02:48 AM

This has been my favorite session since I'm really interested on performance on canvas. The demos and presentation have been very useful to understand the possibilities and limitations.

Thanks for the deck! This is awesome.

Have an account? Sign in or register.

Leave a Comment

13 Ratings: 4.62

Delivery: 4.55

Content: 4.69

Last Five Ratings