
canvas-text
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.
Project Information
- License: MIT License
- 66 stars
- svn-based source control
Labels:
javascript
canvas
text
browsers
stroketext
filltext
measuretext
drawtext
excanvas
html5
whatwg
w3
cross-browser
crossbrowser