This is an archived blog post from 2011.
As you can see the HTML is extremely simple and only requires a filler tag to position your code on the page. Everything else is done on the JS side of things. Let's step through the basic process of drawing a circle.
// Creates canvas 320 × 320 on the tag with the id of "Test" that we can draw on. var canvas = Raphael("Test", 320, 320); // Creates circle object at x = 50, y = 40, with radius 10. var circle = canvas.circle(50, 40, 10); // Sets the fill attribute of the circle to red (#f00). This actually fills in the circle object and until now the circle was empty. circle.attr("fill", "#f00"); // Sets the stroke attribute of the circle to white. This will draw a white outline on the circle. circle.attr("stroke", "#fff");
The above code will draw a simple red circle with a white outline into the page element with the id "Test". This is just a simple example of how simple using Raphaël JS can be. There are several great examples of different things you can do using Raphaël JS at there site.
One particular favorite of mine is the Australia Demo.
The Australia Demo demonstrates how powerful this library can be. It is comparable to something you would normally use Flash to do but it's all done with JS and is therefore much lighter as well as quicker.
There are two things that need noting about this demo. The first is that since the objects you draw using Raphaël are JS objects, they are referable DOM objects which gives you the ability to make them interactive like any other DOM object. Another important thing to note is that to have detailed objects drawn like this demo, you need to have the coordinates to feed the Raphaël library. The easiest way to go about this is to use SVG files, either finding ones that fit your needs or drawing your own.
Obviously the capabilities of this library open up some amazing possibilities. Anytime you can decrease the need for images to be loaded is a good thing for your site and utilizing this library in conjunction with CSS3 you can create an entire site or app UI without any images at all.
If you're interested in trying out Raphaël for yourself, the author provides a testing ground to run your own code in a closed environment here.
Sources: Raphaël JScomments powered by Disqus