SVG with RaphaelJS - Creating Basic Shapes - Drawing Rectangles with RaphaelJS

Welcome to this section of the weekly series SVG with RaphaelJS. This week will we continue our creation of basic shapes with RaphaelJS by working with rectangles.

The rectangle method is simple in itself. It draws a rectangle on the screen. Let's remember that a square is a special case of a rectangle where the width = height. So if we wanted to draw a rectangle, we would ensure that our height and width are equal.

The actual syntax to do this is;

Paper.rect(x, y, width, height, [r])

As shown above, we use the rect() method to create a rectangle. [r] is an optional parameter that represents the border radius. This parameter allows us create a rectangle with a rounded edge.

Our init.js in this case thus becomes:

	$(function(){ var paper = Raphael('container', 500, 500);
	// Draw a red rectangle
	var rectangle = paper.rect(100, 100, 200, 100).attr("fill", "red");
	});

The above code draws a red rectangle on the grid. You can view the output here. The GitHub repository can be found here.

To create a rectangle with a rounded corner of 40, our init.js becomes:

	$(function(){ var paper = Raphael('container', 500, 500);
	// Draw a rectangle with rounded corners
	var rectangle = paper.rect(100, 100, 200, 100, 40).attr("fill", "red");
	});

You can view the result here.

So far we have covered the basic elements in RaphaelJS. With what we have done so far, you should have some ideas running through your head. Stop a while and write them down. Let your imagination run free in this regard.

That was how I started on the journey of using SVG. Along the line, I met people who encouraged me to bring me ideas to life by offering advice and the rest the say is history.

In the next section of this series SVG with RaphaelJS, we shall be looking at paths. Paths are complex shapes that truly show the power of SVG. See you next week.