Exploring the HTML 5 Canvas Element
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).
- If you want a complete tutorial, I’d suggest checking out the one offered by Mozilla, or reading the specification itself.
- Styles are done through properties and accept CSS arguments (i.e. #CCCCCC, rgb(), rgba()).
- Drawing with arc() draws a portion of a circle, not a curve, which is actually pretty handy.
- There is support for drawing curves using either a quadratic algorithm (one control point like Flash) or bezier algorithm (two control points).
- Clipping is similar in nature to using masks in Flash, but more complex to use.
- You can save paths and restore them, which can be used to create basic animation. Set to a timer (i.e. timeline) you can imagine just how far this might be able to go.
- The mechanics of how a line is drawn takes a little getting used to, but are very similar to that of Flash.
- There are methods that allow for the creation of gradients which can be used for both fills and lines.
- Also very similar to Flash, lines can have different caps, joins, and miters and miter limits.
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.