Playing with Raphael, Canvas, and animation

Posted by Elf Sternberg as javascript, programming

So, this afternoon, I spent about four hours and played around with Raphael, the SVG library for HTML 5, and the native Canvas renderer.  Originally, I was only going to go with Raphael, until someone pointed out to me that Raphael doesn’t work on Android phones.    Since my apps have to work on Android phones, I had to find a Canvas alternative.

And I do believe it qualifies as an “alternative.”  Although in both Firefox and Opera, the Canvas and SVG apps look the same, in Chrome (I’m running 12.0.733.0) the Canvas version has noticeable flicker, poor management of the DIV/Canvas size relationship (even when using jQuery, and even after onReady!), and doesn’t quite look the same.

Raphael arcs are… difficult.  They’re elliptical arcs and the SVG language describes a path between two points, with two radii of the ellipse (a horizontal and a vertical), two flags indicating whether or not the arc’s sweep is positive or negative and to go the long way or the short way, and rotation transformation of the final arc.  It took me a long time to wrap my head around the meaning of all the different possibilities.  Canvas arcs are purely circular so they’re more easy to define, but their endpoints are less distinct so creating a “fill” between two line-arcs required more math.   Either way, the learning curve on drawing roundy things is rather steep.

You can see the results in my Raphael and Canvas Experiment project.  The most interesting experiment is Both Arcs, which shows the two arcs being written side by side, Canvas on the left, SVG/Raphael on the right.  If you’re running Chrome, you might see the gradient flicker annoyingly.  Still, this was a lovely opportunity to play with Canvas, Raphael, and animation.  The source code to the final experiment is written in HAML and Coffee, because that’s just how I roll.  A Makefile is provided.  There wasn’t enough CSS to justify using LessCSS.

2 Responses to Playing with Raphael, Canvas, and animation

Mike A.

June 19th, 2011 at 8:31 am

In “Both Arcs”, you said “Also, despite the demo_container class being clearly defined with a height and width, setting the canvas to match that occasionally fails, and the drawing will be mangled.”

Any thoughts as to why this is happening?

Elf Sternberg

June 20th, 2011 at 6:58 am

I suspect it’s a bug in Chromium. As I pointed out, I am running a Developer’s Release, not a Production Release, so there are likely to be bugs in it. It’s the same reason that the Canvas gradient features “flicker”, something not seen in Firefox or Opera.

Comment Form

Subscribe to Feed



June 2011
« Apr   Jul »