August 2013
Intermediate to advanced
404 pages
8h 52m
English
Chapter 11
JavaScript Graphics
One of the most impressive features introduced in HTML5 is the capability to render graphics directly in the browser. Not only can you generate static images with JavaScript, but also you can leverage these techniques to create stunning interactive applications such as video games. In fact, these apps aren't limited to only two dimensions. With the integration of the WebGL engine, you can now create 3D applications that run natively in the browser.
In this chapter, you first discover how to draw 2D scenes in canvas, integrating animation as well as mouse events. You then learn how to render similar scenes with scalable vector graphics (SVG), which are much easier to animate and make interactive. Next, you discover the library Raphaël.js, which will streamline your SVG development with intuitive APIs. You're then introduced to Raphaël's charting libraries, and you find out how to customize these charts with your own code.
After you understand the different two-dimensional techniques, you'll be ready to dive in and work with 3D rendering using canvas and WebGL. You find out why to avoid the low-level WebGL API and instead use the library Three.js, which you leverage to build and animate some basic three-dimensional scenes. Finally, you consider another 3D rendering option, CSS3 transforms, which can be an attractive alternative for more basic apps. By the end of this chapter, you'll know enough JavaScript drawing techniques to render just about any ...
