## Thursday, August 28, 2008

### Raphael - very cool JavaScript library

What is Raphaël? Excerpt from the site:

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. In case you want to create your own specific chart or image crop-n-rotate widget, you can simply achieve it with this library.

The creator of the Raphaël library is Dmitry Baranovskiy who works at Atlassian. (His site gives a "Bandwidth Limit Exceeded" error right now - maybe due to a lot of people accessing it.)

I did a quick search and found these related links:

Painless cross browser vector graphics with Dmitry Baranovskiy’s Raphael Javascript Library, a post on the Web Directions blog.

Announcement of Raphael on Dmitry's Tumblr.

As a quick test, I copied and modified an example from the Raphael site; the code below shows how easy Raphael is for basic use:

Just include the library raphael.js betwen the opening and closing head tags of your HTML; then this code in the HTML body will draw an image with three colored circles diagonally across and down the screen:
` // Creates canvas 320 × 200 at 10, 50 var paper = Raphael(10, 50, 320, 200); // Creates circle at x = 50, y = 40, with radius 10 var circle1 = paper.circle(20, 20, 15); // Sets the fill attribute of the circle to red (#f00) circle1.attr("fill", "#f00"); // Sets the stroke attribute of the circle to white (#fff) circle1.attr("stroke", "#fff");  var circle2 = paper.circle(70, 50, 30); circle2.attr("fill", "#0f0"); circle2.attr("stroke", "#fff");  var circle3 = paper.circle(140, 90, 45); circle3.attr("fill", "#00f"); circle3.attr("stroke", "#fff"); `

And here's the resulting output:

Neat, no?

Vasudev Ram