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)


Installing and setting up RaphaelJS is very simple, it's as simple as downloading the latest RaphaelJS file and including it in HTML.

In three easy steps, you can install RaphaelJS and get it set up.

Step 1 – What do I need?

Before you install RaphaelJS, you will need to check that you have all of the following required elements:

  • A web browser

  • A text editor

Step 2 – Downloading RaphaelJS

The easiest way to download RaphaelJS is as a minified JS, from

RaphaelJS, unlike most libraries, does not have any other dependencies, so it's just raphael.js.

Since RaphaelJS is a JavaScript plugin, the download link will show a plain JavaScript file in the browser. You should copy the text and paste it into a new file named raphael.js (or any name you prefer), and save it to your JavaScript directory or to any location in your server.

Minified RaphaelJS code shown in the browser

Step 3 – Adding it to the HTML

Include it in the bottom section of your HTML page using the <script> tag and point the src attribute to the path where the raphael.js file is located.

Script included at the bottom


The browser reads the HTML code in a linear fashion. If there is a script tag at the top, the browser will download the script and it will start executing it. During this stage, the browser displays a blank white screen, as the rest of the page is yet to be downloaded. Therefore, it is recommended to include the script at the bottom of the page, so that the browser will download all the HTML code and the user will have some content on the screen, while JavaScript is being downloaded in the background.

And that's it!

By this point, you should have a working installation of RaphaelJS and are free to play around and discover more about it.