QuickStart
This library is intended to be very simple, but you can customize it a little bit if you want so. Include the right filesFor this library to work the best it can, you'll need 3 files :
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]--> The Canvas text library file MUST be named canvas.text.js. In the future, that could be changed, but this is very important as of now. The third dependency is related to the font family/weight/style you'll want to use on the canvas element. The font face files can be included the same way the other files are, but need to be after canvas.text.js. The needed face files will be downloaded when needed via Ajax and parsed on the fly. For this to work, these files must respect a convention :
OptionsThe implementation can be customized thanks to a few options :
These options can be defined by adding HTTP params to the canvas.text.js include: <script type="text/javascript" src="canvas.text.js?reimplement=true&debug=true"></script> Use the text functionsNow the libraries are included, the only thing you have to do is to use the text functions, as they are specified on the WHATWG specification page. |
When including canvas-text.js like described on this page it's loaded even when the browser (firefox 3.5 for example) supports the text functions natively. To work around this problem I embed canvas-text.js like this:
There are probably nicer ways to do this but this one works nicely :)
That's a good idea, but as the library itself only is 9kB after being compressed with a minifier like http://dean.edwards.name/packer/ I don't think it is a problem to download it, even with a low bandwidth ;) The problem with your code is that we don't know when the library will be loaded, except if you add a onload callback to the script tag.
how I can insert a whole html page to the canvas, I have to loop on all the html DOM objects and on each element to get it's font attributes or it's innerHTML ?
Hello, I think you'd better look at this : http://ajaxian.com/archives/crazy-times-rendering-html-in-canvas
brilliant