Monday, March 17th, 2008

cvi_text_lib: cross API text stroking

Category: Canvas, JavaScript, Library

Christian Effenberger, or Mr. Canvas as we think of him, has come back from a data recovery nightmare with a new library, cvi_text_lib, that supports stroke text capability for Canvas & VML.

It uses unobtrusive javascript to keep the code clean and it works in all the major browsers – Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+.


  • supports Canvas and VML (identical representation)
  • font format supports moves, lines and curves (bezier & quadratic)
  • font characters 30-127 and 160-255 (charset UTF-8 or ISO-8859-1)
  • font type (built in) is a sans-serif multiple master single
    line stroke font, similar to “VAG Rounded” and “DIN 17”
  • expandable with custom font types/faces
  • font size is limited to min 1 max 99999 default is 12px
  • font weight is limited to min 1 max 400 default is 100%
  • font width is limited to min 10 max 400 default is 100%
  • font spacing is limited to min 10 max 1000 default is 100%
  • uncompressed lib is 32 KBytes (inc. sans-serif font)
  • the integrated sans-serif font is also adaptable for SVG

Here it is at work:

  1. <script src="cvi_text_lib.js"></script>
  2. <script>
  3.     var context = canvas.getContext('2d');
  4.     set_textRenderContext(context);
  5.     if(check_textRenderContext(context)) {
  6.         ...
  7.         context.strokeText(text,x,y,fontsize);
  8.         ...
  9.     }
  10. </script>
  11. <!--[if gte IE 6]>
  12. <script>
  13.     if(check_strokeTextCapability()) {
  14.         ...
  15.         string = get_strokeText(text,x,y,fontsize)
  16.         document.getElementById("div").innerHTML += string;
  17.         ...
  18.     }
  19. </script>
  20. < ![endif]-->

CVI Text Library

Posted by Dion Almaer at 7:28 am

4.6 rating from 36 votes


Comments feed TrackBack URI

I’ve made the library for my CVI-Projects. Because of the universal nature of this library (every software project using canvas or vml can benefit from it) it seems to be fair to release it (same lib but different name) to the open source community (if interest exists and the feedback is according to my low expectations).

Christian Effenberger

Comment by ucanmexwise — March 17, 2008

It’s an impressive project. I’ve dabbled myself a little bit with text rendering using canvas / vml, so I can respect the amount of work that must have gone into this.

I would love to see this released as open source.

Comment by Joeri — March 18, 2008


Comment by ViniciusCamara — March 18, 2008

Good job!

Comment by p01 — March 18, 2008

I’ve made it open source know.
The strokeText.js Script is distributed under the GPL, LGPL and AGPL open source licenses.

Comment by ucanmexwise — May 14, 2008

Leave a comment

You must be logged in to post a comment.