-
Glenn Barnett
4.62
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
Bob Moore ,
03 Oct 02:15 AM
Inspiring! Really awesome demos. Looking forward to studying and experimenting further with canvas and animations.
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
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.
Last Five Ratings
-
urbanor
-
darcyclarke
-
pedroha
-
wadeweaver
-
Jared Fullerton

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.