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+.
Features
- 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:
HTML:
-
-
<script src="cvi_text_lib.js"></script>
-
var context = canvas.getContext('2d');
-
set_textRenderContext(context);
-
if(check_textRenderContext(context)) {
-
...
-
context.strokeText(text,x,y,fontsize);
-
...
-
}
-
</script>
-
<!--[if gte IE 6]>
-
if(check_strokeTextCapability()) {
-
...
-
string = get_strokeText(text,x,y,fontsize)
-
document.getElementById("div").innerHTML += string;
-
...
-
}
-
</script>
-
<![endif]-->
-
4.8 rating from 31 votes
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
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.
Great!
Congrats.
Good job!
I’ve made it open source know.
The strokeText.js Script is distributed under the GPL, LGPL and AGPL open source licenses.