Raphaël JavaScript Library

This is an archived blog post from 2011.

I thought I'd start things out by looking at an amazing JavaScript library which gives you amazing graphical abilities inside the browser. The main purpose of Raphaël JS is to simplify working with vector art in the browser. This simple statement however opens up so many possibilities for use. Imagine having an entire web application or website that is graphically rich but that uses no static image files. Thanks to libraries like this one not only can your site's code be dynamically built, but so can your UI. As an aside, some people dislike requiring that site visitors have javascript enabled but in today's browser and web landscape, it's unrealistic for anyone to have javascript disabled and expect to use popular websites. So how does Raphaël JS work? Well thankfully, it's rather simple. On the HTML side of things all you need is a simple div tag to use as your canvas which is identifiable by a unique ID.

<div id="Test"></div>

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 JS

comments powered by Disqus