Engage Web logo - horizontal-resized


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.

Latest posts by Steven (see all)

Get in touch


    Book a consultation with Engage Web

    Book a consultation with Engage Web

    Sorry to interrupt, but would you like to download our FREE Social Media Calendars?

    Social Media Calendar Product Mock Up for web

     You can use them to plan your social media and content in advance, saving you time and getting better results. When you use our social media calendars, you'll always know what's trending and what to post about for your business.