Raphael returns to the canvas

Raphael returns to the canvas

Following our recent look at SVG, vector graphics and jQuery, we came across a fantastic little box of tricks called the Raphael. It’s a javascript library specifically tailored towards working with the canvas tag.

The documentation is quite intimidating at first, unless you have had the misfortune of trying to draw something purely by code using the standard canvas method. However, this library offers some fantastic shortcuts. Drawing a circle with the standard canvas language would look a little something like this:

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

whereas with the Raphael library is would be:

var circle = paper.circle(50, 40, 10);

The elements created by Raphael use VML as a base, so each object is actually a DOM model. This means they can easily integrate libraries like jQuery into existing systems, or become part of one in development.

This is not completely necessary though, as Raphael comes with its own built-in tools to cover the usual interactions hat you would expect from a JavaScript library: click, double click, hover, mousein, mouseout, and an array of interesting transitions and effects. These are incredibly well implemented and the transition of shapes through animation are especially impressive.

One element of this library I have found particularly useful is the Raphael.svg that returns a Boolean value of TRUE if the browser supports SVG. It’s such a straightforward operation, but an invaluable one when you are dealing with some of the dinosaur browsers out there that are still getting used.

For those more technically orientated, click here for the Github page.

Steven is Engage Web’s go-to man for all things web-related, bringing his knowledge of current trends in web design and development to the team.
Latest posts by Steven (see all)

Get in touch

    Please confirm we can contact you


    Book a consultation with Engage Web