18
Animation 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...
