My favorites | Sign in
Project Home Wiki Issues Source
Search
for
QuickStart  
Quick start guide
Featured, Phase-Deploy
Updated Feb 4, 2010 by phenxdesign

This library is intended to be very simple, but you can customize it a little bit if you want so.

Include the right files

For this library to work the best it can, you'll need 3 files :

  • The library itself
  • The ExCanvas library if you want it to be available to Internet Explorer 6+ users
  • At least one font face file: they contain the font glyphs coordinates. They can be found on the typeface.js website or here (lots of fonts !).

<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script type="text/javascript" src="canvas.text.js"></script>

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 :

  • lower case letters
  • must respect this format : family-weight-style.js where face is the font family, like Arial or Times new roman, weight is the font weight (bold or normal), style is the font style (italic or normal)
  • the spaces in the font family name must be replaced by underscores (_)
  • be placed in the faces folder next to the canvas.text.js file.

Options

The implementation can be customized thanks to a few options :

  • "reimplement": override the built-in text functions by the ones provided by the lib.
  • "dontUseMoz": don't use the Mozilla text functions in Firefox 3.0.
  • "fallbackCharacter": the character used when a character is not in the font face file.
  • "debug": used when debugging, it does nothing for now.

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 functions

Now 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.

Comment by ve...@gmx.ch, May 13, 2009

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:

<script type="text/javascript">
/* load canvas.text.js only when needed */
if(!document.createElement('canvas').getContext('2d').fillText) {
    document
.write('<script src="canvas.text.js" type="text/javascript"></s' + 'cript>');
}
</script>

There are probably nicer ways to do this but this one works nicely :)

Comment by project member fabien.menager, Jul 24, 2009

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.

Comment by elira...@gmail.com, Oct 28, 2009

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 ?

Comment by project member fabien.menager, Oct 28, 2009

Hello, I think you'd better look at this : http://ajaxian.com/archives/crazy-times-rendering-html-in-canvas

Comment by anass.ya...@gmail.com, Jan 31, 2011

brilliant


Sign in to add a comment
Powered by Google Project Hosting