What is this library for?

This Javascript library implements the three methods to draw text on HTML5 <canvas> tags (strokeText, fillText and measureText) to the browsers which don't already have it (Firefox 2/3.0, Internet Explorer 6+, Opera 9+, Safari 3.x, Chrome 1.0).

The main goal of this implementation is to respect the specs given by the W3C and WHATWG for the HTML5 <canvas> tag.

It doesn't change the already implemented functions in Firefox 3.5+, Safari 4 and Chrome 2+ and doesn't require any other library except ExCanvas for Internet Explorer.

This project is partially based on the work of David Chester in his project typeface.js.

Can I see it in action ?

You can see the live DEMO here.

How to use it ?

Simply include the canvas.text.js in the head tag and place the font face files on your server, in the folder faces/ in the directory of canvas.text.js. They must be named family-weight-style.js, you can find such files here or here. For example, a correct file name for the Times New Roman Bold Italic font would be times_new_roman-bold-italic.js.

You can also include them in the head, after canvas.text.js, but in this case they will be downloaded even if the browser already supports text methods. The browsers that have built-in text functions won't use the font face files, they will use the client's fonts.

If you want more options, go to the QuickStart guide.