Raphael JS is a SVG based and lightweight JavaScript framework. It lets you draw vector graphics in your browser. I have been using Raphael JS for last six months and it’s absolutely fascinating.

Setting up Raphael:

Let’s start by downloading the Raphael JS framework from . At the top right of the page, you’ll see
compressed and uncompressed copies of Raphael version 1.0. I’d recommend you grab yourself a copy of the uncompressed source for the time being – this
way you can have a peek at the source and see what extra edge you can get on the documentation. With that downloaded, let’s set up a simple HTML document called index.htm and include Raphael in it. We also include our_script.js, which is where we’ll write our own JavaScript, and in the body of the document we create a minimally styled div with IDcanvas_container, which will act as a container for our drawings.

<html>
 <head>
 <title>Raphael Play</title>
 <script type="text/javascript" src="path/to/raphael.js"></script>
 <script type="text/javascript" src="path/to/our_script.js"></script>
 <style type="text/css">
 #canvas_container {
 width: 500px;
 border: 1px solid #aaa;
 }
 </style>
 </head>
 <body>
 <div id="canvas_container"></div>
 </body>
</html>

Creating our Drawing Canvas

When we draw with Raphael, we do so onto a canvas. This canvas, which we’ll reference in a variable called ‘paper’, is created using the Raphael() object. We always specify the width and height of the canvas, but have the option of also specifying either a) the absolute position of the canvas relative to the viewport, or b) an element ‘container’ that the canvas is drawn inside.

var paper = new Raphael(x, y, width, height); //option (a)
var paper = new Raphael(element, width, height); //option (b)

I generally prefer the latter method (b), since we usually know where our divs are. In our_script.js, let’s wait for the DOM to load and then create a 500px by 500px canvas inside our canvas_container div:

window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
}

All our drawing methods will now be bound to the paper variable.

Built-in Shapes

Now that we have our canvas, let’s draw some shapes onto it. The origin, that is, the x = 0, y = 0 point, is at the top-left corner of our canvas. This means that any x, y coordinates we specify in our methods are relative to this point. First off, a circle. Modify our_script.js to look like this:

window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
var circle = paper.circle(100, 100, 80);
}

This will draw a circle with a radius of 80px with its center placed at x = 100, y = 100. We can draw as many circles as we like and we don’t have to reference them in a variable:

for(var i = 0; i < 5; i+=1) {
var multiplier = i*5;
 paper.circle(250 + (2*multiplier), 100 + multiplier, 50 - multiplier);
}

Next, let’s draw a rectangle. We do this using the rect() method, which takes as parameters: the x and y coordinates of the rectangle’s top-left corner and the rectangle’s desired width and height.

var rectangle = paper.rect(200, 200, 250, 100);

Finally, we’ll draw an ellipse. Its parameters are the same as the circle, i.e. x, y, radius, except that we can specify x and y radii specifically.

var ellipse = paper.ellipse(200, 400, 100, 50);

This will draw an ellipse with x-radius = 100, y-radius = 50 at x = 200, y = 400. Our our_script.js file should now look like this:

window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
var circle = paper.circle(100, 100, 80);
for(var i = 0; i < 5; i+=1) {
var multiplier = i*5;
 paper.circle(250 + (2*multiplier), 100 + multiplier, 50 - multiplier)
 }
var rectangle = paper.rect(200, 200, 250, 100);
var ellipse = paper.ellipse(200, 400, 100, 50);
}

If we now open up index.htm in our browser, we should get a bunch of shape drawings

Drawing Paths

While the built-in shapes are handy to have, it is paths that offer us true drawing flexibility.
When drawing paths, it helps to think of an imaginary cursor or pen-point pressed against the screen. When we create our canvas, the cursor is rooted to the
top-left corner. The first thing we should do, then, is
lift up our cursor or pen-point and move it to a spacious region in which we can draw.

As an example, let’s move our cursor to the centre of our canvas. That is, let’s move it 250px in the x-direction and move it 250px in the y-direction.

We do this using a so-called path string.

A path string is a string comprised of ‘action’ commands and numeric values corresponding to the command. We move our cursor to x = 250, y = 250 using the following
string:

"M 250 250"

‘M’ means we want to move without drawing and is followed by x and y canvas co-ordinates.

Now that our cursor is where we want it, let’s draw a line relative to this point using the lower-case ‘L’ command, ‘l’.

"M 250 250 l 0 -50"

This will draw a line upwards 50px in the y-direction. Let’s write a path string that will draw a tetris tetronimo:

"M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z"

The ‘z’ command signifies the path closing – it will join a line from wherever we are to the point specified by our initial ‘M’ command.

We tell Raphael to actually draw this path using the path() method. Modify our_script.js to look like this:

window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
var tetronimo = paper.path("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z");
}

If you load up index.htm, you should now see a tetronimo like this:

Path strings can become incredibly complex using curve and arc commands. Full coverage of paths can be found at the SVG Path specification page.

You can find more about Animation and Drawing paths in RaphaelJS here.

Tagged with: RaphaelJSTutorial
 

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

 

Looking for something?

Use the form below to search the site:


Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Related News Feeds

Set your Twitter account name in your settings to use the TwitterBar Section.