Kevin Hoyt

HTML 5 introduces a new canvas element which comes along with a graphics context based on Quartz 2D. This means that JavaScript developers can draw paths, fill and clip (mask) shapes, transform bitmaps, and even provide basic animation in addition to other operations. The similarities to the ActionScript Drawing API (especially in ActionScript 3) are striking, so I couldn’t resist playing around.

I should note that the canvas element, as part of HTML 5, has not been finalized. That being said, browser vendors are already implementing support for it. WebKit/Safari was the first to blaze this trail (which also means Adobe AIR), with Firefox (1.5 and higher) and Opera 9 both already including support. Although I haven’t tested it, Google also has on ongoing project to provide canvas support in IE6 as well.

The current state of the canvas element only provides for basic shapes, so I thought it’d be a fun exercise to pick up where those primitives left off. Rather than reinvent the wheel, I decided to leverage the work done by Ric Ewing as posted on the Adobe Developer Connection. It is worth mentioning that Ric’s algorithms are ActionScript, not JavaScript, but the API’s are similar enough to make for an easy job of porting the code.

There’s no Flash in these examples whatsoever, but they are virtually identical to those originally posted by Ric. The drawing is done with the HTML canvas element and JavaScript, and the slider controls are courtesy of the Yahoo! UI (YUI). The biggest part of porting the shape drawing algorithms was simply managing the paths a little more closely (Flash makes some assumptions that make programming a little easier). Here are some additional notes on things I learned during the project (as well as the source).

Ric’s examples are all ActionScript 1, which is the rough equivalent of JavaScript today (they both come from ECMA-262). I often encounter Flex developers who feel that Flex is better because of ActionScript 3. It’s important to remember however, that ActionScript is only a recent addition to the Flash Player. In fact, while Flex 1.x was ActionScript 2 at compile time, that all became ActionScript 1. In essence Flex 1.x was ActionScript 1.

Why is any of that important? Well, primarily because RIA emerged, existed and thrived before the arrival of Flex and even ActionScript 2. Components written in ActionScript 1 were commonly distributed as commercial software (remember DevNet subscriptions?). If not for a lack of time I’d be tempted to port some of those old components (many of which can still be found in modern RIA) to JavaScript. The point is two-fold; remember where you came from, and be open-minded in evaluating HTML/JavaScript (or just standards in general) for your next RIA project.

This entry was posted on Thursday, January 3rd, 2008 at 2:58 pm and is filed under HTML, JavaScript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.