We can create a rectangle using the rect() method. This method takes four required parameters and a fifth optional parameter, border-radius. The border-radius parameter will make the rectangle rounded (rounded corners) by the number of pixels specified.

The syntax for this method is:

paper.rect(X,Y,Width,Height,border-radius(optional));

A normal rectangle can be created using the following code snippet:

// creating a raphael paper in 'paperDiv'
var paper = Raphael ("paperDiv", 650,400);
// creating a rectangle with the rect() method. The four required parameters are X,Y,Width & Height
var rect = paper.rect(35,25,170,100).attr({
  "fill":"#17A9C6", //filling with background color
  "stroke":"#2A6570", // border color of the rectangle
  "stroke-width":2 // the width of the border 
});

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

Plain rectangle

The following code will create a basic rectangle with rounded corners:

// creating a raphael paper in 'paperDiv'
var paper = Raphael ("paperDiv", 650,400);
//The fifth parameter will make the rectangle rounded by the number of pixels specified – A rectangle with rounded corners
var rect = paper.rect(35,25,170,100,20).attr({
  "fill":"#17A9C6",//background color of the rectangle
  "stroke":"#2A6570",//border color of the rectangle
  "stroke-width":2 // width of the border
});
//in the preceding code 20(highlighted) is the border-radius of the rectangle.

The output for the preceding code snippet is a rectangle with rounded corners, as shown in the following screenshot:

Rectangle with rounded corners

We can create other basic shapes in the same way. Let's create an ellipse with our magic wand.

An ellipse is created using the ellipse() method and it takes four required parameters, namely x,y, horizontal radius, and vertical radius. The horizontal radius will be the width of the ellipse divided by two and the vertical radius will be the height of the ellipse divided by two.

The syntax for creating an ellipse is:

paper.ellipse(X,Y,rX,rY);
//rX is the horizontal radius & rY is the vertical radius of the ellipse

Let's consider the following example for creating an ellipse:

// creating a raphael paperin 'paperDiv'
var paper = Raphael ("paperDiv", 650,400);
//The ellipse() method takes four required parameters: X,Y, horizontal radius & vertical Radius
var ellipse = paper.ellipse(195,125,170,100).attr({
  "fill":"#17A9C6", // background color of the ellipse
  "stroke":"#2A6570", // ellipse's border color
  "stroke-width":2 // border width
});

The preceding code will create an ellipse of width 170 x 2 and height 100 x 2.

An ellipse created using the ellipse() method is shown in the following screenshot:

An Ellipse

Let's create some star shapes in Inkscape using the built-in shapes tool.

Star shapes created using the built-in shapes tool

The paths used by SVG and RaphaelJS are similar. The trick is to use the paths generated by the vector graphics editor in RaphaelJS. For this purpose, the shape must be saved as an SVG file.

Saving the shape as an SVG file

The next step is to copy the path from SVG and paste it into Raphael's path() method.

SVG is a markup language, and therefore it's nested in tags. The SVG path can be found in the <path> and </path> tags. After locating the path tag, look for the d attribute. This will contain a long path sequence. You've now hit the bullseye.

The path string is highlighted

After copying the path string from SVG, paste it into Raphael's path() method.

var newpath=paper.path("copied path string from SVG").attr({
  "fill":"#5DDEF4",
  "stroke":"#2A6570",
  "stroke-width":2
});

That's it! We have created a complex shape in RaphaelJS with absolute simplicity.

A screenshot depicting the complex shapes created in RaphaelJS using the path string copied from an SVG file is shown here:

Complex shapes created in RaphaelJS using path string

The animate() method is used to animate various properties of the element for a specified duration.

The syntax for this method is as follows:

element.animate({
  Property1:value,
  Property2:value
},time_in_milliseconds,easing(optional),
callback_function(optional));

The following is an example of the animate() method:

rect.animate({
  "width":"300",
  "height":"200"
},500,'bounce',function(){
//something to do after animation
  alert("animation complete")
})

The attr() method is a very important method that is used to add attributes such as styles and other physical properties such as position, height, width, and so on to the element. It takes values in key value pairs.

The syntax for this method is as follows:

element.attr({
  Property1:value,
  Property2:value
})

The following is an example of the attr() method:

// Adding background color and stroke to a rectangle
rect.attr({
  "fill":"#17A9C6",   // Adds a background color
  "stroke":"#2A6570", // the color of the border
  "stroke-width":2    // the width of the border
})

The click() method is used to bind the click event to Raphael elements.

The following is an example of the click() method:

rect.click(function(){
  //something to do when the rectangle is clicked
  alert("clicked rectangle");
})

The dblclick() method adds the double click event to the element.

The following is an example of the dblclick() method:

cir.dblclick(function(){
  //alerts "it's a double click " when double clicked
  alert("It's a double click !");
})

The mousedown() method binds the mousedown event to Raphael elements—it triggers when any mouse button is pressed down.

The following is an example of the mousedown() method:

rect.mousedown(function(){
// The rectangle will animate to 200px wide when any mouse button is pressed down
rect.animate({
  'width':'200'
  },400)
})

The mouseup() event binds the mouseup event to Raphael elements—it triggers when any mouse button is released.

The following is an example of the mouseup() method:

rect.mouseup(function(){
// The rectangle will animate to 100px wide any mouse button is released
rect.animate({
  'width':'100'
  },400)
})

The mousemove() method triggers when the mouse is moved over the element.

The following is an example of the mousemove() method:

// increases the size of the rectangle as the mouse moves over the rectangle.
var wd=100 // Intial width
rect.mousemove(function(){
  wd++ // incrementing the width on mouse move
  rect.attr({
    //setting the width of the rectangle with the attr() method
    'width':wd
  });
})

The mouseover() method triggers when the mouse enters the Raphael element.

The following is an example of the mouseover() method:

//animating the size of the circle when the mouse enters the circle
cir.mouseover(function(){
  cir.animate({
  transform:'s2' // scaling up the circle twice
  },500,'elastic'); //adding and elastic easing function to the animation
})

The mouseout() method triggers when the mouse leaves the Raphael element.

The following is an example of the mouseout() method:

// scaling down the size of the circle when the mouse leaves it
cir.mouseout(function(){
  cir.animate({
  transform:'s0.5' // scaling down the circle to half of its original size
  },500,'bounce') //adding and elastic easing function to the animation
})

There will be situations where we will want to duplicate an element. Some might say, "Ah ! that's easy, I just need to copy the element to a new variable like var newrect=rect". Well, it looks like you have made a copy, but that won't work for sure. The variable acts as a reference to the object, in this case, the rectangle. So when we copy the variable, we are just copying the reference. In reality, the new variable still points to the same old object. Here is an example of the wrong way:

// assigning the rect to a new variable called newRect
var newRect=rect;
newRect.attr({
  fill:'#ddd',
  transform:'t100,100'
})

The following screenshot demonstrates what happens when the variable is duplicated—there is no clone of the rectangle.

Variable is duplicated

It's obvious that copying the variable didn't work, as it's evident that the background color has been applied to the same rectangle, and there is no second rectangle as there is supposed to be.

This problem can be addressed by the clone() method in a simple and elegant way.

//To duplicate a rectangle
var newRect=rect.clone();
newRect.attr({
  fill:'#ddd',
  transform:'t100,100'
})

Using the clone() method instead of duplicating the variable will produce a clone of the rectangle, as depicted in the following screenshot:

Producing a clone using the clone() method

Now, we see two rectangles and the background color of the second rectangle is now gray as intended.

Raphael has an incredibly simple way to assign some data to each and every element and retrieve it on demand. It's as simple as assigning some data to an element while creating it and recalling that data whenever necessary. It's a simple and straightforward way.

Data can be added to an element using the data() method in key value pairs.

The following is an example of the data() method:

//assigning a name to a circle
cir.data('name','Am Raphael JS');
// retrieving the data
cir.click(function(){
  alert(this.data('name'));
})

The following is a screenshot depicting the data contents of the circle when clicked:

Data contents of the circle when clicked

The removedata() method takes the key as a parameter. If the key isn't provided, it will remove all the associated data.

The syntax for this method is:

removedata(key)

The following is an example of the removedata() method:

//removing the name of the circle
cir.removeData('name') // removes the name of the circle

The getBBox() method returns the bounding box of the element. By default, the bounding will take into account any transformations on the element. To get the bounding box before any transformation is applied on the element, the isWithoutTransform parameter must be set to true.

The following is an example of the getBBox() method:

cir.getBBox() // returns the bounding box 
cir.getBBox({
isWithoutTransform:true // this will return the bouding box values before any transformation that has been applied on the element. It will still return the old values ignoring the transformations
})

The getBBox() method returns an object with the following values:

The getPointAtLength() method returns the coordinates of the point at a particular length of a path. The getPointAtLength() method takes two parameters, namely path and length.

The syntax for this method is:

getPointAtLength(path,length)

The path must be a path string and the length a number.

The getPointAtLength() method returns an object with the following values:

The toFront() method brings the element to the forefront on top of all other elements. Its function is similar to CSS z-index. It doesn't take any parameters.

The following is an example of the toFront() method:

cir.toFront();//brings the circle on top of all the elements

The following screenshot demonstrates the use of the toFront() method. The circle is brought to the front by using the toFront() method; therefore, it overlaps the rectangle.

Circle brought to the front using the toFront() method

The toBack() method is the exact opposite of the toFront() method, as it moves the element behind all the other elements.

The following is an example of the toBack() method:

rect.toBack() // moves the rect behind all the elements

The hide() method makes the element invisible. This method is the Raphael equivalent of visibility:hidden or display:none in CSS.

The following is an example of the hide() method:

rect.hide()

The show() method makes the element visible.

The following is an example of the show() method:

rect.show()

The transform() method adds a transformation to a given element. It takes only one parameter and it's the transformation string.

The syntax for this method is as follows:

transform([transformationString]);

The following is an example of the transform() method:

rect.transform("s1.5t100,100,r90");
//scales the rectangle to 1.5 times larger and then translates it to 100px in the X-axis, 100px in the Y-axis and finally rotating it by 90 degrees
//Transformation can also be done using the attr() method.
element.attr('transform','s1.5t100,100,r90');

The remove() method removes the element from the paper.

The following is an example of the remove() method:

rect.remove();
//the preceding line removes the rect from Raphael paper

The paper.circle() method creates a circle.

The following is the syntax for this method:

circle(x,y,radius);

Where x is the x position of the circle, y is the y position of the circle, and radius is the radius of the circle.

The following is an example of the paper.circle() method:

var cir=paper.circle(100,50,20);

The paper.ellipse() method creates an ellipse.

The following is the syntax for this method:

ellipse(x,y,rx,ry);

where x is the x position of the circle, y is the y position of the circle, rx is the horizontal radius, and ry is the vertical radius.

The following is an example of the paper.ellipse() method:

var ell = paper.ellipse(15,30,80,50);

The paper.rect() method creates a simple rectangle.

The following is a syntax for this method:

rect(x,y,width,height,radius(optional));

Where x is the x position of the circle, y is the y position of the circle, width is the width of the rectangle, and height is the height of the rectangle. It also has a last fifth parameter — the border radius of the rectangle, which will add a curved edge of the given radius to the rectangle. Rounded corners do look smooth. Though the method's name is rect(), it can be used to create a box of any shape. It is not restricted to create perfect rectangles.

The following is an example of the paper.rect() method:

// A rectangle with a border radius of 5px
var rectangle = paper.rect(10,10,50,70,5);

The paper.clear() method is used to clear the drawing canvas. This is the magical broom. The paper.clear() method doesn't take any parameters; it wipes it all.

The following is an example of the paper.clear() method:

paper.clear()

Raphael is good at drawing, and using Raphael we can replace some images with it. But that doesn't mean it's an image replacement solution; Raphael can only substitute. It's, therefore, wrong to consider it as a complete replacement for images. However, images can be manipulated in Raphael.

The paper.image() method allows us to import images on to the paper. This method takes the following five parameters:

The following is an example of the paper.image() method:

var img=paper.image("images/world.png",10,15,80,100);
//imports an image called world.png and places it at 10,15 position. Sets the image's width to 80px and height to 100px

And now the imported image is converted into a Raphael object. All the usual transformations can be applied to that image object.

The paper.setSize() method is a very handy method. This method allows the resizing of the Raphael paper object, so that you don't run out of space. This method takes two required parameters, namely, width and height—these will be the new width and height of the Raphael paper.

The following is the syntax of this method:

paper.setSize(width,height);

The following is an example of the paper.setSize() method:

paper.setSize(500,600);
//500 and 600 will be the new width and height of the paper.

The paper.set() method groups several Raphael objects, and any action performed on this set will apply to all the elements. The set() method merely groups the elements, it doesn't create any copies of the elements. Deleting a set will have no effect on the elements.

It is worth mentioning that sets in RaphaelJS are ordered. This varies from the set type in Python, which is a group of unordered objects.

The following is the syntax for this method:

var raphaelSet=paper.set();
raphaelSet.push(element1,element2, ...);

The following is an example of the paper.set() method:

// the following code will create a new set called raphaelSet, add elements to it and change the color of the set to red
var raphaelSet=paper.set();//creating a new set
// adding elements to the set using the push() method 
raphaelSet.push(circle,rect,ellipse);
//changing the color of the set – this will affect all the elements in the set.
raphaelSet.attr('fill','red');

The following is a screenshot demonstrating the use of the paperset() method in RaphaelJS.

Changing the color of the set to red changes the color of all the elements in the set.

The set.clear() method removes all the elements from the set. The set() method only groups elements together, it doesn't duplicate any elements. Therefore, when a set is cleared, no elements are removed, they are just unbounded.

The following is the syntax of this method:

Set.clear();

The following is an example of the set.clear() method:

raphaelSet.clear();
// The preceding code will remove the set called raphaelSet, not its elements

Clearing a set seems to be simple—a call to the clear method and kaboom, everything is gone. What about precision picking? RaphaelJS provides the set.exclude() method, which can be used to remove only a particular element from the set. This method takes only one required parameter, that is, the element to be removed. Want to remove a black sheep? No problem.

The following is the syntax of this method:

set.exclude(element);

The following is an example of the set.exclude() method:

raphaelSet.exclude(rect);
//The preceding code removes the element called 'rect' from the set 'raphaelSet'

The set.forEach() method executes a function for every element of the set. The callback function takes only one parameter, which is a reference to the current element in the loop.

The following is the syntax of this method:

set.forEach(callback_function,thisArg);

The following is an example of the set.forEach() method:

raphaelSet.forEach(function(elm){
  elm.attr('fill','green');
})
// The preceding code will loop through all the elements in the raphaelSet and change the background color of each and every element to green.

The set.pop() method removes the last element from the set and returns it.

The following is an example of the set.pop() method:

raphaelSet.pop();
// the preceding code will remove the last element from the raphaelSet and return the removed element.

The set.splice() method is used to delete and insert an element. This method takes three parameters, namely, index, count, and element, which are to be inserted. Index is where the element should be deleted, count is the number of elements to remove from the index position, and finally, the element to be inserted.

The following is the syntax of this method:

set.splice(index, count, element);

The following is an example of the set.splice() method:

var rect=paper.rect(10,10,50,100).attr('fill','green');
raphaelSet.splice(1,2,rect);
// The preceding code will remove two elements from the index position of 1 and add a rect element.