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.
- Making colours count - February 22, 2014
- Facebook opens up origami offering - February 15, 2014
- Hello Ruby - February 8, 2014
