HTML5 Canvas Font Rendering Results

Just launched the first version of an online product builder for Pacific Headwear at CapBuilder.net. It makes intensive use of HTML5/Canvas technology. What a fun project!

This project pushed the limits of Canvas technology and replaced the previous Flash based cap builder Pacific Headwear was using. One of the biggest challenges was making sure the builder would perform reliably across a wide variety of platforms and browsers, including the iPad and iPad with retina display. If you are willing to drop older browsers it is possible. SVG rendering was an alternative that was explored, but the Canvas rendering approach proved more successful for our needs.

The letters are rendered using the fillText() Canvas method. That method is extremely primitive and gives ‘just enough’ to get by. Features the builder needed to make it shine include curved text, outline text, and scaling. None of those features are supported out of the box with Canvas. I implemented these features by creating a library of reusable widgets.

Here is a quick code sample of how to render text in Canvas:

var canvas = $('#canvasTest')[0];
var context = canvas.getContext('2d');
context.font = "normal 60pt arial";
context.fillStyle = "#FFFF00";
context.fillText("HELLO WORLD", 0, 0);

The purpose of this post is to share the cross browser rendering results of the fillText() method. It also points out, to my astonishment, that at this point in time, Chrome has the worst rendering with fillText() out of all the major browsers. I am amazed to report that IE9 and IE10 on Win7 and Win8 clearly beat Chrome 26 and Firefox 20.0 at making text look good with the fillText() canvas method. Note how the Chrome and Firefox samples on Win7 and Win8 are jagged and lack anti-aliasing. We call them the ‘jaggies’.

Here is a side by side comparison:

Chrome 26 Win7 vi IE9 Win7 canvas fillText

I commented on Chrome bug #7508, which captures the issue completely. It was originally reported in February of 2009. Anti-aliasing is an intensive rendering step. Naturally this needs to be done with care, perhaps with a way for developers to turn it on/off. This is better than implementing it wholesale and screwing over everyone who likes it the way it is. I appreciate their prudence, but not the fact that all other browsers default to anti-aliased rendering.