O'Reilly logo

Instant RaphaelJS Starter by A. Krishna Sagar

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required