Vector-Based JavaScript

July 3, 2009 § Leave a comment

Raphaël is a JavaScript library that simplify your vector graphics.

It uses SVG W3C and VML standard to create graphics. Each graphical object you carete is a DOM object that you can attach JavaScript event handlers or modify them later.

The advantages are to make drawing vector art compatible cross-browser. It supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.

// 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 circle =, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");
// Sets the stroke attribute of the circle to white (#fff)
circle.attr("stroke", "#fff");

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

What’s this?

You are currently reading Vector-Based JavaScript at Web Builders.


%d bloggers like this: