Professional JavaScript for Web Developers, 4th Edition

18Animation and Graphics with Canvas

WHAT'S IN THIS CHAPTER?

• Using requestAnimationFrame
• Understanding the <canvas> element
• Drawing simple 2D graphics
• 3D drawing with WebGL

Graphics and animation in the browser are an increasingly essential component of the modern web, but they are also extremely difficult to do well. Visually complicated features require performance tuning and hardware acceleration so that they don't slow down the browser. An increasingly robust suite of APIs and tools allows for development of such features.

Arguably, HTML5's most popular addition is the <canvas> element. This element designates an area of the page where graphics can be created, on the fly, using JavaScript. Originally proposed by Apple for use with its Dashboard widgets, <canvas> quickly was added into HTML5 and found a very fast adoption rate by browsers. All major browsers support <canvas> to some degree.

Similar to the other parts of the browser environment, <canvas> is made up of a few API sets, and not all browsers support all API sets. There is a 2D context with basic drawing capabilities and a proposed 3D context called WebGL. The latest versions of the supporting browsers now support both the 2D context and WebGL.

USING requestAnimationFrame

For a long time, timers and intervals have been the state of the art for JavaScript-based animations. While CSS transitions and animations make some animations easy for web developers, little has changed in the world of JavaScript-based ...