Eric Butler’s Weblog

The patch for the last of the major outstanding bugs with the WHATWG Canvas text API landed in time for a nearly spec compliant implementation to make it into Firefox 3.1 Alpha 1. I am pleased to say that Canvas now supports right-to-left text and bidirectional text resolution on its text drawing functions.

Canvas has undergone and will be undergoing some other changes, as well. I went through and cleaned up a lot of old code so that, among other things, Canvas uses Mozilla’s Thebes API instead of directly calling into Cairo. Philip Taylor has created a new set of unit tests for Canvas which are more extensive than before. Additionally, a patch has been sitting around for a while that adds shadow support to Canvas, which I hope to push to completion soon.

I am currently employed by the Mozilla Corporation as a summer intern. I work primarily on Gecko, the layout engine. I started at the end of May 2008, and so far it’s been a blast. I am working with Vlad Vukićević as my mentor on graphics work for the Mozilla platform.

My first project was to hack on the HTML canvas element, a new edition in the upcoming HTML 5 specification. Firefox has a Mozilla-specific API, written by Rob Arnold, to add much-needed text rendering capabilities to canvas for Firefox 3. But since then the WHATWG have proposed a text API, and so I implemented much of that specification.

The spec is missing some of the cooler features that the moz-specific one has (namely text along a path) but it has a few other useful things such as the ability to anchor the text by any alignement or baseline as well as having support for rtl fonts. And, of course, the Mozilla-specific one is still around.

Here is the rendering of a sample I made, showing how the anchor points and transformation matrices can be used to generate a bar graph dynamically on the client side. Click on the image to see the actual html file and source code. This was my first time writing javascript, so my apologies for any oddities in the code. Note that this will only render correctly with one of the more recent nightlies.

Another awesome demo that uses canvas text rendering is Paul O’Shannessy’s LOLcanvas, a bookmarklet that takes Flickr pages and LOLifiies them.

So there’s a little description of some of the things I have done so far. It looks like I’m really going to enjoy the rest of my summer here, and I look forward to the other projects on which I will get to work.