Unleash the Power of Hardware-Accelerated HTML5 Canvas
HTML5 gives the broad population of Web developers a chance to leap forward in functionality, performance, and speed when compared to native applications. Here's what you need to know about hardware acceleration of the HTML5
By Cameron Laird
It's time to learn HTML5. Among other benefits, it's a good way to get the most out of your hardware.
Is that a surprise? We generally think of Web applications as "adequate" at their best, and annoyingly slow all too often; standard folklore says that native applications dominate performance comparisons. Demanding gamers or power business users certainly don't want to wait on the Web for the programs they use daily.
While native apps have been largely superior for many years, innovations such as Worlds Biggest PacMan demonstrate that the web is catching-up. Now, HTML5 gives the broad population of Web developers a chance to leap forward in both functionality and performance and, in important cases, meet or exceed that of native apps. Here's what you need to know about hardware acceleration of the HTML5
A Faster Web for Media and Games
Why do these sites look and perform more like native applications? They all use
How Hardware Acceleration Makes it Faster
Most readers have browsers that will demonstrate the functionality of HTML5's
Suppose it's time for a PacMan creature to move a step to the right. How is that done? The browser renders a “translation”: it coordinates the pixels that make up the creature are displaced to the new position, the creature redrawn and the old creature erased. More complex movements involve even more abstruse algorithms of additions, subtractions, multiplications and divisions. With enough movement on the screen, and enough complexity in the calculations, rendering a
Most modern desktops built have not only a CPU, but also a graphical processing unit (GPU). A GPU effectively takes over from its CPU nearly all the burden of calculation involved in graphical rendering, and does it with remarkable speed. The result: when a browser detects the need for more complex calculations, it switches from CPU to CPU-and-GPU operation. The user sees the difference in rendering speed as measured by techniques such as the Hardware Acceleration Stress Test that can easily jump from 13 frames per second to 180 (!) frames per second. Try it yourself at one of these sites with different browsers:
Putting Your GPU to Work
How can you and your end-users make your canvas take advantage of hardware acceleration? You need to make sure both your computer hardware and browser are configured properly. The bad news is that your end-users need this too. The good news is that most modern devices will get a benefit. Here’s what you need to consider:
GPU or Integrated CPU/GPU – Most modern desktops boast dedicated GPUs which will significantly enhance the canvas experience by many orders of magnitude. The surprising part may be that laptops and mobile devices will also get a noticeable benefit through a new set of integrated chips. Most servers and older desktops lack them, so you’ll need to be prepared to provide an alternative or “gracefully degrade” the experience for those users.
Latest Device Drivers – It's critical that you have appropriate device drivers installed to make the most of your configuration. Many manufacturers have recently updated theirs so that GPUs can work correctly with hardware-accelerated browsers. Your users may receive automatic updates but you can read-up on the latest driver support for hardware-accelerated browsers here.
Since is a wide range of devices and drivers, browsers also offer ways to switch between hardware and software rendering. For Firefox 4, for example, it appears as Edit/Preferences/Advanced/"Use hardware acceleration ..." Internet Explorer 9 automatically detects whether your device is capable for hardware acceleration, but you can manually change it.
Hardware-Accelerated Browser – It must be modern enough to provide native support for
However, some browsers have noticeably faster performance with
Browser-makers are already working to make hardware acceleration faster, so expect these performance results to change rapidly. Internet Explorer 10 Platform Preview is noticeably faster than Internet Explorer 9 in Fireflies. The latest Chromium 14 developer build also shows that Google is making hardware acceleration a priority in its upcoming releases.
Coding for Canvas
Think Client, not Server – Load the raw data from the server but generate graphics on the Client. This takes advantage of the browser and device CPU/GPU combination which is likely to be more capable for hardware acceleration.
One specific coding tip from that blog deserves to be widely known: to update programmatically the color of a particular image or item, draw frames from sprite sheets in destination-in mode. The example that appears there is.
Not only does client-side graphic generation transfer computational load to the GPU, which is designed for exactly such a responsibility, but it reduces the need to transmit images through too-often-slow networks.
Measure performance in end-user results – Testing through browser tools like F12 Developer Tools for networking bottlenecks and page load times is a good start but the best “measurement” here involves active human involvement: it’s not enough just to request the browser to report on, for example, how fast it is rendering a scene. An intelligent observer needs to confirm that updates are actually giving the desired animation effects, rather than just re-painting an unchanging view, and that the browser remains properly responsive.
Canvas for Your Site