VT’s Tech Blog

Raphaël is a small JavaScript library  released under the MIT License that helps with creating and playing with vector graphics on the web.

Raphaël uses SVG and VML as a base for graphics creation. Because of that every created object is a DOM object so you can attach JavaScript event handlers or modify objects later. Raphaël’s goal is to provide an adapter that will make drawing cross-browser and easy. Currently library supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.

Once you include raphael.js in your HTML file, try the following example. Once that displays on screen, click on the black box which shows up to see how the onclick function on box1 works.

// Creates canvas 320 × 200 at 1, 1
var paper = Raphael(1, 1, 320, 200);
// Create a regular rectangle
var box1 = paper.rect(15, 15, 30, 30);
//Set the box fill to black
box1.attr("fill", "#000");
// Set the box stroke color to white
box1.attr("stroke","#fff");
// create a rounded rectangle
var box2 = paper.rect(10, 10, 100, 50, 10);
// set box2's fill to grey
box2.attr("fill", "#ddd");
 
//Bring Box1 to the foreground
box1.toFront();
 
//Attach a onclick function to box1 to change the color of the box
// to blue when clicked
box1[0].onclick = function () { box1.attr("fill", "blue"); };

Links:
Raphaël Home Page
Documentation

Related articles by Zemanta

• Raphaël: Simple graphics wrapper on top of SVG and VML