JavaScript Cookbook, 2nd Edition

Chapter 9. Creating Media Rich, Interactive Web Effects

Pretty pictures. Cool videos. Sound!

The Web of the future will be a richer place with the new and improved innovations ready to use. Our old friends SVG and Canvas are getting new life and generating new interest. Added to them are the new video and audio elements included in HTML5, and the near-future potential of 3D graphics.

Best of all, none of these innovations requires any kind of proprietary plug-in—they’re all becoming integrated with all your browser clients, including those on your smartphones and tablets, as well as your computers.

Note

This chapter assumes you have some familiarity with the Canvas element, as well as SVG. A brief tutorial or introduction should be sufficient. I recommend the Mozilla Developer Network Canvas Tutorial and the W3C’s SVG Primer. MDN also has several good introductions to working with SVG.

Creating a Dynamic Line Chart in Canvas

Problem

You want to display a line chart in your web page, but the data changes over time, and you want to dynamically update it.

Solution

Use the canvas element and the path method to create the chart. When the data changes, update the chart:

 var array1 = [[100,100], [150, 50], [200,185],
               [250, 185], [300,250], [350,100], [400,250],
               [450, 100], [500,20], [550,80], [600, 120]];

 var imgcanvas = document.getElementById("imgcanvas");

 if (imgcanvas.getContext) {
   var ctx = imgcanvas.getContext('2d');


   // rect one
   ctx.strokeRect(0,0,600,300);

   // line path
   ctx.beginPath();