With the release of Firefox 3/Gecko 1.9 just around the corner, I wanted to highlight some improvements to our HTML Canvas implementation. Last summer, Rob Arnold implemented an experimental text rendering API for <canvas>. This experimental API is shipping in Firefox 3, and is described at the Drawing Text Using a Canvas article on MDC. The lack of text rendering has been one of the big holes in the <canvas> API, so I'm happy to have a solution, at least for Firefox. Since then, there's a proposed text API being worked on in the WHATWG; it's more extensive in some areas (more control over alignment and measuring) and less in others (no ability to draw text along a path or text to a path), though the missing features are coming. We'll have the spec API implemented soon in Firefox nightlies, but in the meantime, many of the basic functions translate directly from our own variant to the spec version, so you shouldn't need to wait to take advantage of text in Canvas-using apps.
Here's the rendering of one of the samples that Rob put together, showing how text can be drawn along a path, which itself is generated by text (click for the actual canvas example and to view source):
Also new in Firefox 3 is support for the transform() and setTransform() methods, to allow for more direct control over the current transformation matrix in the context. Documentation on these two methods is available as part of the Canvas Tutorial at MDC.
In addition to new rendering features, the 2D canvas should be a good deal faster on all platforms. For some great canvas demos, check out John Resig's Processing.js and Aza Raskin's Algorithm Ink!
9 Comments to “HTML Canvas in Firefox 3”
- 1 Pingback on Jun 16th, 2008 at 9:25 am
- 2 Pingback on Jun 16th, 2008 at 6:21 pm
- 3 Pingback on Jun 17th, 2008 at 5:19 am
- 4 Pingback on Jun 17th, 2008 at 11:30 am
- 5 Pingback on Aug 3rd, 2008 at 12:59 pm
How much faster will the rendering be expected to get in Moz2 with the Tamarin JIT code? And is the code for textpath re-using code for similar features in SVG, or is it new code?
The textpath reuses (copies actually) the SVG code.
I guess these are more spec than implementation questions…
Is there a way to break the text so that you can have more control over what text appears along the discontinuous path? Say you wanted to have the second phrase that begins “The Mozilla project…” start on another character, but without specifying an additional mozTextAlongPath or mozPathText?
Is there a way to follow just the outer outline of multipath objects like this font? Say you didn’t want to have text on the inside of the o or a. Or define areas of exclusion like the dot in the i?
Any way to force character orientation? Say I didn’t want to have upside-down text… or maybe I wanted a fixed orientation along the entire path.
Nice thing – unluckily designers wouldn’t be able to use this within the next ~6-7 years (since this will be the time damn IE needs to get itselfe something alike and spread the right version widely enough to use it safely…).
But it is nice to see some proove of concept work done for implementations of this feature.
Nice rendering anyway.