Dynamic graphics - HTML5 and CSS3 - page 118

The Raphaël JavaScript library takes a different approach. Instead of
making existing SVG work in IE , it presents an API for creating graph-
ics. In Firefox, Chrome, Safari, and Opera it creates SVG ; in IE , it cre-
ates VML . The interface Raphaël provides looks similar to the <canvas>
API :
var paper = Raphael(10, 50, 320, 200);
var circle = paper.circle(50, 40, 10);
circle.attr("fill", "#f00");
circle.attr("stroke", "#fff");
Raphaël looks similar to <canvas> , but it's still SVG
underneath. This means that when you call the circle function,
it returns an object. This object can later be modified, and
the drawing will update to reflect the changes; you don't have
to clear everything and redraw it as you do with <canvas> .
Summary
In this chapter you've learned how you can generate graphics in your
web page on the fly using two different HTML5 technologies— <canvas>
and SVG . Because both can be created and updated dynamically, they
don't need the user to reload the page in order to present new informa-
tion to the user.
You've learned the basic techniques for drawing shapes and lines with
both technologies, as well as how to import images and apply effects
and transformations. With <canvas> you've looked at how to do simple
animation while with SVG you saw how you can import whole web
pages and apply transformations to them.
Now that you can create your own graphics on the fly, it's time to
complete your education on the multimedia possibilities of HTML5
with a look at the new audio and video elements. In the next
chapter, you'll see that HTML5 makes adding audio and video to web
pages as easy as adding images to web pages is in HTML4.