JavaScript: The Definitive Guide, 6th Edition

Chapter 21. Scripted Media and Graphics

This chapter describes how to use JavaScript to manipulate images, control audio and video streams, and draw graphics. Scripting Images explains 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. Scripting Audio and Video covers the HTML5 <audio> and <video> elements and their JavaScript APIs.

After these first two sections on images, audio and video, the chapter moves on to cover two powerful technologies for drawing client-side graphics. The ability to dynamically generate sophisticated graphics in the browser 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 reduces the load on the server, potentially saving on hardware costs.

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

SVG: Scalable Vector Graphics explains Scalable Vector Graphics, or SVG. SVG is an XML-based language for describing graphics, and SVG drawings can be created and scripted using JavaScript and the DOM. Finally, Graphics in a <canvas> covers the HTML5 <canvas> element and its full-featured JavaScript API ...