Book Image

Instant RaphaelJS Starter

By : Krishna Sagar
Book Image

Instant RaphaelJS Starter

By: Krishna Sagar

Overview of this book

Drawing in a browser without images has been around for a long time but it was a complex task with browser support issues. Raphael JS aims to solve all these problems with simple and clear methods to draw cross-browser compatible drawings. Imagine drawing complex dials, graphs, and meters for a dashboard, all without images, and the ability to dynamically manipulate those drawings. Creativity is the only limit with Raphael JS."Instant RaphaelJS Starter" is a practical, hands-on guide that provides you with a number of clear step-by-step exercises, which will help you take advantage of the real power that is behind Raphael JS, and give you a good grounding in using it in your web pages."Instant RaphaelJS Starter" looks at the HTML5 video formats available, and breaks down the mystery and confusion that surrounds which format to use. It will take you through a number of clear, practical recipes that will help you to take advantage of the new HTML5 video standard, quickly and painlessly. You will also learn how to draw your own shapes using any vector graphics editor, or by using one of the pre-defined shapes. We will also take a look at adding functionality such as DOM events, or animations, as well as how to manipulate the shapes dynamically. If you want to take advantage of imageless vector graphics for browsers using Raphael JS, then this is the book for you.You will learn everything you need to know to convert shapes and perform animations, as well as how to draw custom shapes with simple techniques using Raphael JS and use them across multiple browsers.
Table of Contents (7 chapters)

Quick start – creating your first shape

Here, we will create the first shape in Raphael in two simple steps.

Step 1 – Creating a canvas to draw on

Initializing a Raphael object is as simple as munching a banana, and there are two ways to munch.

It can either be created directly in the browser's viewport (viewable area) or in an element. It's usually advisable to create the Raphael object in an element, probably a Div tag. It's important to keep in mind that the paper (drawing area) is the boundary of the x, y grid, not the browser's window.

Creating a canvas in the browser's viewport

The syntax for creating the Raphael object, which is the base for all other Raphael methods and functions, is as follows:

var raphaelObj = Raphael(x,y,width,height);

The four parameters inside the Raphael function are nothing but x-position, y-position, width, and height of the canvas to be created.

Since it is created in the browser's viewport, the positioning of the canvas will be absolute; therefore, it will overlap any HTML element underneath.

For example:

// Creating the canvas in the browser's viewport
var paper = Raphael(20, 30, 650, 400);


Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at If you purchased this book elsewhere, you can visit and register to have the files e-mailed directly to you.

Here the Raphael object is initialized and assigned to a variable called paper. This variable will be christened with all the powers of RaphaelJS. It will, henceforth, become the Raphael Paper Object.

Creating an object in an element (recommended)

To initiate the Raphael object inside an element, we must add the element ID or the element itself in the place of the positioning coordinates (x, y).

Let's consider the following example:

//The element itself is passed 
//This line creates a Raphael paper inside 'paperDiv', which is 650px in width and 400px in height
var elm= document.getElementById("paperDiv");
var paper = Raphael(elm, 650, 400);
// The element ID is passed directly
//This line also creates a Raphael paper inside 'paperDiv', which is 650px in width and 400px in height
var paper = Raphael("paperDiv", 650, 400);

That's it; we now have the engine up and running.

Vrooom vrooom.

Step 2 – Drawing the circle

It is now time to shift gears.

The moment we assigned the Raphael object to the variable paper, it transforms itself into a magic wand, allowing us to pull off tricks to the best of our imagination.

There are certain predefined methods to create basic geometrical shapes such as circles, rectangles, and ellipses. Now we are going to spell out a circle with our shiny new wand.

A circle can be drawn using the circle() method. This method takes three parameters, namely x, y, and radius. Assign it to a variable that allows us to use it later in the code, specifically, to access the vector object easily for animations, transformations, and other effects.

The syntax is as follows:

var cir =,y,r);
// x and y are the positioning co-ordinates, and "r" is the radius of the circle
//Here the circle is assigned to a variable called cir.
var cir =,25,20);
// This will create a circle of 20 pixels in radius at 35,25 (X & Y axis).

The output for the preceding code is as shown in the following screenshot:

A circle created using RaphaelJS

The attr() method

We now have a smooth circle. It's absolutely fantastic, but wouldn't it be much better if we could add some color and other styles to it? RaphaelJS gives us the option to add styles to the object. It's a fairly straightforward method.

Styles and other customizations to our new circle are done using the attr() method.

This method takes the properties as parameters. The properties are entered as a collection of objects in key-value pairs. If you are familiar with jQuery, then its syntax is identical to jQuery's attr() method. This format is known as JavaScript Object Notation (JSON), to further clarify.

The syntax for this method is as follows:


Let's consider the following example:

//adding the attributes as key value pair
var coloredCircle =,25,20).attr({

The output for the preceding code snippet is as shown in the following screenshot:

A circle with styles applied using the attr() method

Raphael's paper allows easy integration of vector graphics in an HTML layout, which makes it even more appealing.

Paper—the shiny new wand.


There are a ton of attributes available for each object and a list of all the objects can be found at the Raphael documentation. The URL can be found at the People and places you should get to know section, as an entire list of attributes is beyond the scope of this book.