Thursday, April 9th, 2009

canvas-text: Add text functions to subpar canvas implementations

Category: Canvas

<p>Fabien Ménager has created an interesting new library called canvas-text that simply “adds the three canvas text functions (strokeText, fillText and measureText) to the canvas implementation of the browsers which don’t already have these functions (Firefox 2/3.0, Internet Explorer 6+, Opera 9+, Safari 3, Chrome 1.0). It doesn’t change the already implemented functions in Firefox 3.1+, Safari 4 and Chrome 2.”

Having the methods work is one thing, but what about the performance?

Well, there are some interesting examples for you to test:

I talked to Fabien about performance and he shed some more light:

The only bad performance issues are the font face download, JSON eval,
and data parsing. I try to use a cache when possible, but it’s not
always possible.

A workaround would be to have two font face files : a full one, with
lots of characters, and a reduced one, with only the common ones. The
browser cache does the rest for the font face file download
(downloaded via Ajax or a script tag).

For IE, I think I’ll have to make a VML renderer for IE that wouldn’t send the
instructions to ExCanvas but would work directly on the VML.

Obviously, this is something I really want to play with and see how far we can get with this type of thing and Bespin. It is very much in an alpha state right now, but looking good.

Related Content:

Posted by Dion Almaer at 8:06 am
6 Comments

+++--
3.9 rating from 54 votes

6 Comments »

Comments feed TrackBack URI

I’ve seen implementations of arbitrary fonts in canvas and SVG, and have been generally impressed, particularly if the text is static. I doubt the uptake of this particular implementation, as I doubt many people will get past the poor antialiasing. I don’t know the ins and outs of how that came to pass, but it makes a huge difference and makes any use of the implementation feel like a trip to the 90s.

Still, good work, and I’m glad people are pursuing this. There really needs to be more capable graphics in all of the browsers.

Comment by eyelidlessness — April 9, 2009

@eyelidlessness
There are already a few implementations of text drawing, I tried them and they work pretty well, but the goal of this implementation is to use the official API, give the choice to use any possible font and give the same result as the native methods. I don’t think there is another lib that can do that.
If you are talking about this lib, the poor anti-aliasing is when the browser has the native methods (the library will not re-implement them, except if you want to): they perform really well, but aren’t really beautiful. The best native methods I’ve seen are the ones from Chrome 2.0, this browser is the only one to anti-alias the glyphs.
The lib tries to implement these functions when not present, it is slower but prettier because it uses the canvas drawing anti-aliasing, which is quite good.
Still, thank you for your comment :)

Comment by fabienmenager — April 9, 2009

@fabienmenager,

I see, I didn’t realize that my browser supported the text methods. Seems I should have RTFA. I have to say I’m surprised that Safari 4 implements canvas text with poor antialiasing, considering Safari has consistently been the best browser up until now for antialiasing *everything* (downscaled images, rounded corners, etc) where other browsers don’t (FF3 improved this, as, I suspect, have later releases of Chrome).

I’m also disappointed at the performance of the native implementation. Considering how unbelievably fast canvas usually is, it’s pretty damn slow, especially with the “everything” example.

Cheers.

Comment by eyelidlessness — April 9, 2009

Looks like it’s based on typeface.js, fyi.

Comment by tlrobinson — April 9, 2009

@tlrobinson
Yep, I mentioned it on the Google Code project home page, this should have been mentioned in the article, but the code taken from this lib is very small.

@eyelidlessness
Yep, I was suprized too by the poor anti-aliasing offered by the browsers. I haven’t tested on Firefox 3.1 yet.

Comment by fabienmenager — April 9, 2009

Do not be upset by ‘poor’ anti-aliasing, as that means that we have more control! Rather, be thankful that we finally have sub pixel precision available to us in a drawing surface/animation platform. This alone should allow for amazing new experiments. There is more information about anti-aliasing on the Mozilla Canvas example page here http://developer.mozilla.org/en/Canvas_tutorial/Applying_styles_and_colors. Using this information, I have been able to get satisfactory results in my text anti-aliasing tests.

Comment by strata — June 6, 2009

Leave a comment

You must be logged in to post a comment.