Firefox 3’s HTML Canvas implementation has been improved and now includes an experimental text rendering API. This API is described in detail at the Drawing text using a canvas article at the Mozilla Developer Center (MDC). Also new is support for the transform() and setTransform() methods, which are documented as part of the MDC’s fantastic Canvas tutorial. Two-dimensional Canvas performance has also been improved and is faster on all platforms.
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
