HTML5 Canvas Font Rendering Results

Just launched the first version of an online product builder for Pacific Headwear at 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.

The Canvas fillText() Rendering Results – April, 2013:

Win7 – Chrome and Firefox have jaggies, IE looks perfect, Safari is okay:

Chrome 26 Win7 canvas fillText

Firefox 20 Win7 canvas fillText

IE9 Win7 canvas fillText

Safari 5.1.7 Win7 canvas fillText

Win8 – Chrome has jaggies, Firefox is much better over the Win7 version,  IE10 is perfect, and Safari is about the same as Win7:

Chrome 26 Win8 canvas fillText

Firefox 20 Win8 canvas fillText

IE10.0.8x Win8 canvas fillText

Safari 5.1.7 Win8 canvas fillText

Mac OSX 10.6.8 – everything looks great on the Mac:

Chrome 26 Mac canvas fillText

Firefox 12 Mac canvas fillText

Safari 5.1.8 Mac canvas fillText

iPad4 – could be a little sharper but no jaggies:

iPad4 canvas fillText

This entry was posted in Application Development and tagged , , . Bookmark the permalink.

Comments are closed.