Our work on a cutting-edge HTML5-based game library exposed several flaws in canvas implementations both between browsers and between operating systems. Canvas is a unique API in that it provides extremely low-level access to a drawing context, which means that performance and functionality are determined entirely by the underlying implementation. This has interesting consequences, such as differing implementations across operating systems even in the same browser version. While developers may get the ability to draw arbitrary shapes on the screen, they lose features such as high-level mouse events and other interaction paradigms and they do not have easy access to certain features that other drawing libraries expose, such as multiple graphics buffers, double buffering and animation support, and fast raw pixel APIs. We present common problems and solutions that users developing with canvas will face. Topics include image manipulation techniques, browser and OS differences, upcoming HTML5 APIs, and JS optimization techniques for high-performance drawing. We discuss in detail some surprising performance characteristics of image compositing, clipping, scaling, and rotation, as well as how the different canvas rendering backends contribute to overall canvas performance. Finally, we offer suggestions for implementation and optimization strategies that leverage existing and future canvas capabilities.
Expert in web performance, comet, and HTML5. Previously worked at Meebo developing the Meebo Bar.
For information on exhibition and sponsorship opportunities at the conference, contact Yvonne Romaine at email@example.com
Download the Velocity Sponsor/Exhibitor Prospectus
View a complete list of Velocity contacts