JavaScript: The Definitive Guide, 5th Edition

Chapter 22. Scripted Client-Side Graphics

This chapter describes how to use JavaScript to manipulate graphics. It begins by explaining traditional JavaScript techniques for visual effects such as image rollovers (in which one static image is replaced by another when the mouse pointer moves over it). It then moves on to describe how to use JavaScript to draw your own graphics. Combining JavaScript with CSS allows you to draw horizontal and vertical lines and rectangles, which is sufficient for many kinds of “boxes and arrows” drawings, as well more complex graphics such as bar charts.

Next, the chapter covers vector-graphics technologies, which provide a far more powerful client-side drawing capability. The ability to dynamically generate sophisticated graphics on the client-side is important for several reasons:

• The code used to produce graphics on the client side is typically much smaller than the images themselves, creating a substantial bandwidth savings.

• Dynamically generating graphics from real-time data uses a lot of CPU cycles. Offloading this task to the client (which usually has CPU power to spare) reduces the load on the server, potentially saving on hardware costs.

• Generating graphics on the client is consistent with the Ajax application architecture in which servers provide data and clients manage the presentation of that data.

This chapter includes examples of five vector-graphics technologies that can be harnessed with client-side JavaScript:

• Scalable Vector Graphics, or ...