Taking advantage of GPU acceleration in the 2D canvas

Published on Updated on

The 2D canvas in Chrome got some hardware acceleration love back in February. The acceleration makes drawing 2D sprites really fast, as the implementation is using the GPU to do drawImage.

You can check out this example for the kinds of things the acceleration enables. The demo is drawing 180 transformed 256x256 PNG sprites on a full-window canvas and running an N-body simulation on them to make the sprites gravitate towards each other. And it all runs smoothly at 30 to 60 frames per second on a low-powered laptop.

There are still some rough edges in the acceleration implementation, so you may see performance degradation in some use cases (please let the Chrome team know through new.crbug.com so that we can fix them!)

Updated on Improve article

Back

Arrived! xhr.send(ArrayBufferViews)

Next

Writing a flippable book using CSS Regions and 3D transforms

This site uses cookies to deliver and enhance the quality of its services and to analyze traffic. If you agree, cookies are also used to serve advertising and to personalize the content and advertisements that you see. Learn more about our use of cookies.