Raphael returns to the canvas

Posted on August 3, 2013


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)
Call Now Button

Who Engage Web has helped:

Ice Lolly Minuteman Press BUNZLGS1 UK The Underfloor Heating Store West Cheshire Athletic Club Thomas Cook MWB Business ExchangeWeb Media 360 D2 Architects Beacon Financial Training Steely ProductsBurlydam Garden Centre Asentiv BodyHQ Clever Vine Endeavour Mortgages Pro Networks Comm-Tech Wickers World Ascot Mortgages Top Teks
TEL: 0345 621 4321