JavaScript: Fonts for the HTML5 canvas tag.

I’m starting to play with some infographics for an enterprise dashboard application for which the HTML5 canvas tag is looking to be the preferred solution (View the working draft specification at the WHATWG site). Since text embedding is not a feature of the canvas tag, it may be hacked in with some fancy JavaScript and a PNG or GIF image. I found a nifty workaround by Benjamin Joffe that uses an inline encoded representation of the binary PNG data, but it was missing a few things, such as PNG alpha support.

To create a usable implementation for yourself:

1. Have a look at the demo to see what’s involved and grab the JavaScript source which is embedded into the page.
2. Visit Benjamin Joffe’s Canvas Font Generator to generate other fonts, if you wish. A few notes on this process:
   • Make sure ClearType is disabled before you do a screen grab, especially for smaller font sizes which should not be anti-aliased.
   • As a nice touch, before you save the PNG from your favorite image editor, make the background transparent so you can place your text on backgrounds other than white. It also allows you to place rows of text near each other without background pixels obscuring your text.
   • You may also consider saving PNGs for colors other than black; I exported both black and white images to lay over light and dark backgrounds, respectively.
3. Use Mike Scalora’s URI image encoder to encode the PNG you created in the previous step and replace the appropriate string assignment in your JavaScript.

See a demo of what I was able to achieve in a short time and to grab the source for Tahoma 8pt in black or white, with a transparent background. You may also be interested in a vector implementation by Jim Studt.