HTML Canvas in Firefox 3.1
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.
June 25th, 2008 at 9:22 pm
WHAT ?!?!? All mozilla interns work less than 60 hrs per week ?!?!? Fired !!!!!
June 25th, 2008 at 11:46 pm
Hi there!
I have been working on a revision graph for the Mercurial web interface, and I’ve found the canvas implementation in Firefox 3 to be quite nice!
Unfortunately, I also noticed that it seems to lose content when I put too much stuff into it. I was wondering if we can look into why that happens?
There’s an example at http://hg.xavamedia.nl/mercurial/crew/graph?revcount=800. Use the revcount parameter to vary the amount of revisions displayed. The cut-off for me (with a Firefox 3 release) seems to be around 835-840 revisions (which is still nicely fast enough!).
If you find this interesting, find me in #hg on irc.m.o, and maybe we can try to fix it.
June 26th, 2008 at 3:08 am
I have a dream …
that all browsers will be created equal
That I can use some obscure element in a creative but legitimate way
I have a dream …
That fundamentally simplistic design concepts become self-evident
I have a dream that the imperialist software dictators of east coast America come to realise that the WORLD IS ROUND, not square.
I have a dream people!
I have a dream that boxes can be rounded!
Though a canvas may often be flat and square as a box, on it can many circles and spheres of rounded curves be created!
I have a dream that the digital <canvas> can wake up to the round world reality from it’s flat-world orientation.
I have this dream, can you make it a reality?
Can xbrowser (e)canvas support == xbrowser border-radius ?