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)

So, what is RaphaelJS?

RaphaelJS is a vector graphics library, which is used to draw objects in the browser.

In this section, we will see what RaphaelJS is, how it is different from other similar drawing libraries, and how it sets itself apart from HTML5 Canvas.

Two-headed and three-lettered

Almost a decade ago, we had a great technology called Scalable Vector Graphics (SVG), which was derived from Vector Markup Language (VML) to draw simple to complex 2D graphics on browsers. SVG was a World Wide Web Consortium (W3C) specification and was there lingering in the minds of advanced developers for a decade or so. VML, on the other hand, was Microsoft's specification and existed even before SVG. Though SVG was inspired from VML, they were never fond of each other and never co-existed on the same browser. SVG ran on all browsers except Internet Explorer (IE 9 and above supports SVG) and vice versa.

A two-headed and three-lettered headache.

The marriage of two problems and the birth of RaphaelJS

SVG was a beautiful baby but no one wanted the labor pains—coding using SVG and VML for cross-browser consistency was so much of a serious pain that most developers simply used images. So we had two different technologies, both doing the same thing but they were both significantly different in their syntaxes and never ran on the same browser. It seemed like there was a problem in getting them to peacefully co-exist.

JavaScript – the binder of oddities

JavaScript bound these two giants together and out of their marriage was born RaphaelJS, inheriting the best charms of both parents. It has the ability to scale almost any browser's turf and dance to any developer's tune.

The solution—RaphaelJS.

Browser support

Most browsers support SVG and all versions of IE from IE 5.0 onwards support VML. Since RaphaelJS was developed to make the most of SVG and VML, it can practically run in almost any browser, making it more reliable.

RaphaelJS—the amphibian

What is RaphaelJS and what is not RaphaelJS?

We now know what RaphaelJS is—it's a combination of SVG and VML using whichever of these two technologies the current browser supports, therefore it is versatile and reliable. But it's equally important to also know what is not RaphaelJS.

A little about vector and raster graphics

Just like the world is of two primary states water and land, graphics are of two primitive types—vector and raster. Vector graphics are drawn using geometrical primitives like lines, curves, ellipses, and so on. Various such primitives join together and form a graphic. Vector graphics are drawn on the screen mathematically. They are scalable without loss in quality. Raster graphics, on the other hand, are pixel-based and are not scalable. The main advantage with vector graphics is that they are scalable and are also real objects, meaning we can fiddle with them and manipulate them dynamically. The following diagram shows the difference between raster (bitmap) and vector graphics:

Difference between raster (bitmap) and vector graphics

RaphaelJS as a vector

RaphaelJS is a vector graphics library, therefore the drawings are real DOM objects. Thus they can be dynamically accessed, manipulated, resized, and practically hammered into anything you want in runtime. Best of all is that they can be assigned events like click, mouseover, mouseleave, and so on. The capabilities of RaphaelJS are just incredible.

Raphael uses vector graphics and HTML 5 Canvas uses raster graphics.

The x, y positioning that RaphaelJS uses

RaphaelJS uses the x, y positioning system to draw. The top-left corner of the screen is 0,0 and the horizontal scale is the x axis and the vertical scale is the y axis.

So if the code says (15,20) then it means that the point will be at 15 points from the x axis (horizontal) and 20 points from the y axis (vertical).

RaphaelJS is a vector graphics-based library built to make it easier to draw on the screen. RaphaelJS uses either SVG or VML, whichever the current browser supports. The drawings created using RaphaelJS are DOM objects and can be manipulated dynamically making them more versatile, they can also be assigned events such as click, mouseover, and mouseleave. All these amazing properties make RaphaelJS exciting to learn and use.


RaphaelJS and HTML 5 Canvas are two different things entirely. Though they both appear to do similar things (drawing), they are different in how they do it. RaphaelJS is based on vector graphics and HTML5 Canvas is raster-based.