What is it good for strokeText.js is an unobtrusive javascript library working in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. The library provides cross API text stroking capability for Canvas and VML. The (built in) sans-serif font is also adapted for SVG to ensure an identical representation. strokeText.js is not a standalone application. It act's as an expansion to support core text stroke capability and has to be accessed via API, which is different for Canvas and VML. The library is based on cvi_text_lib.js and was original made for the CVI-Projects but because of the universal nature of this library (every software project using canvas, vml or svg can benefit from it) it seems to be fair to release it as strokeText.js to the open source community. Back to table of contents

Main Font Features supports Canvas and VML (identical representation)

font format supports moves, lines and curves (bezier & quadratic)

font characters 30-127 and 160-255 (ISO-8859-1)

font charset UTF-8 or ISO-8859-1 is recommended

font type (built in) is a sans-serif multiple master single line stroke font, similar to "VAG Rounded", "DIN 17" and a few other fonts of that kind

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 weight for normal text should not be more than 200%

font weight for small sizes should not be less than 50%

font weight for normal text should not be more than 200% font weight for small sizes should not be less than 50% font width is limited to min 10 max 400 default is 100%

font spacing is limited to min 10 max 1000 default is 100%

color and opacity is set through context.strokeStyle

stroke text is set through context.strokeText()

Lib don't modify the render stack (ctx.save|ctx.restore)

Lib don't close any pathes (ctx.closePath)

Uncompressed lib is 32 KBytes (inc. sans-serif font)

The inbuilt sans-serif font is also adapted for SVG Back to table of contents

Font: Typographic Attributes strokeText.js: Font Attributes Images used are copyrighted and released under a ShareAlike CC license. Licensees may distribute derivative works only under a license identical to the license that governs the original work. Back to table of contents

Font: Characters & Sizes strokeText.js: Font Characters ( UTF-8|ISO-8859-1 ) strokeText.js: Font Sizes ( 28|24|20|16|12|11|10|9|8|7 px ) Images used are copyrighted and released under a ShareAlike CC license. Licensees may distribute derivative works only under a license identical to the license that governs the original work. Back to table of contents

Font: Weight, Width & Space strokeText.js: Font Weight ( 50%|100%|200% ) strokeText.js: Font Width ( 50%|100%|200% ) strokeText.js: Font Spacing ( 200%|100%|50% ) Images used are copyrighted and released under a ShareAlike CC license. Licensees may distribute derivative works only under a license identical to the license that governs the original work. Back to table of contents

Font: Faces & Effects strokeText.js: Multiple Master (through different weight/width/space) strokeText.js: Special Effects (through multiple strokes) Images used are copyrighted and released under a ShareAlike CC license. Licensees may distribute derivative works only under a license identical to the license that governs the original work. Back to table of contents

Library API (canvas) Init Function:

BOOLEAN = check_textRenderContext(context)

webKit (Safari) patch function:

set_textRenderContext(context) Main Function:

context.strokeText(text, x, y, fontsize, fontweight, fontwidth, charspace, fonttype)

fontsize == baseline == textheight / 32 * 25 Helper Function:

draw_boundingBox(context, x, y, baseline, textheight, textwidth) Utility Functions:

STRING = get_widthText(string, textwidth, fontsize, fontwidth, charspace, fonttype)

FLOAT = get_textWidth(string, fontsize, fontwidth, charspace, fonttype)

FLOAT = get_textHeight(fontsize)

FLOAT = get_baseLine(fontsize) Back to table of contents

Library API (vml) Init Function:

BOOLEAN = check_strokeTextCapability() Main Function:

STRING = get_strokeText(text, x, y, fontsize, fontweight, fontwidth, charspace, fonttype, color, opacity, rotation, id)

fontsize == baseline == textheight / 32 * 25 Helper Function:

STRING = get_boundingBox(x, y, baseline, textheight, textwidth, linewidth, color, opacity, rotation, id) Utility Functions:

STRING = get_widthText(string, textwidth, fontsize, fontwidth, charspace, fonttype)

FLOAT = get_textWidth(string, fontsize, fontwidth, charspace, fonttype)

FLOAT = get_textHeight(fontsize)

FLOAT = get_baseLine(fontsize) Back to table of contents

Howto Setup Canvas:

var context = canvas.getContext('2d');

set_textRenderContext(context);

if(check_textRenderContext(context)) {

...

context.strokeText(text, x, y, fontsize);

...

} VML:

if(check_strokeTextCapability()) {

...

var txtobj = get_strokeText(text, x, y, fontsize);

document.getElementById("element").innerHTML += txtobj;

...

} Back to table of contents