HTML5 Canvas: Real-World Performance Optimization

Martin Hunt (Game Closure), Bobby Richter (Mozilla)
Web Performance Mission City
Average rating: **...
(2.14, 7 ratings)

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.

Photo of Martin Hunt

Martin Hunt

Game Closure

Expert in web performance, comet, and HTML5. Previously worked at Meebo developing the Meebo Bar.

Photo of Bobby  Richter

Bobby Richter

Mozilla

Bobby Richter is the Creative Technology Lead for the Mozilla Foundation’s Web Made Movies group where he manages, demos, and contributes to Popcorn.js and Butter as part of the FOSS HTML5 response to proprietary rich-media web software. Exploiting the thinness of the line between work and hobby, Bobby is also a member of the #audio WebGL demoscene group, and several other small initiatives to increase the richness and interactivity of content on the internet. Consequently, Bobby helps to maintain several increasingly popular projects such as CubicVR.js and, most pertinently, WebGL-2D: JavaScript libraries which offer high-performance 3D rendering, and a hardware-accelerated implementation respectively. Before turning his attention to the world of Open Source, Bobby was the lead programmer on the Emmy-award-winning NFB project, Out My Window, and a student of the University of Waterloo.

  • Keynote Systems
  • Cisco
  • Google
  • Neustar
  • Betfair
  • Cotendo
  • Rackspace Hosting
  • Akamai
  • Apica
  • dynaTrace
  • Equinix
  • Facebook
  • New Relic
  • Opscode
  • Salesforce.com
  • Yahoo! Inc.
  • AppDynamics
  • Aptimize
  • Blaze
  • CDNetworks
  • Cedexis
  • Citrix Systems
  • Compuware Corporation
  • Dyn Inc.
  • F5 Networks
  • Heroku
  • Percona
  • Quest Software
  • Schooner Information Technology
  • SiteSpect
  • Splunk
  • Strangeloop
  • WatchMouse
  • Zeus Technology
  • Neustar

Sponsorship Opportunities

For information on exhibition and sponsorship opportunities at the conference, contact Yvonne Romaine at yromaine@oreilly.com

Download the Velocity Sponsor/Exhibitor Prospectus

Contact Us

View a complete list of Velocity contacts