fontpath-canvas
An implementation of fontpath-simple-renderer, using HTML5 2D canvas.
This renders glyphs by decomposing their vector paths from fontpath into moveTo
, lineTo
, etc. operations for the canvas context. This keeps it crisp for large sizes, but degrades at smaller sizes, and also presents a performance penalty. Generally this implementation is best suited for large fonts; and can be optimized by caching the paths to an off-screen canvas.
For more optimized rendering (with hinting), bitmap fonts would be worth exploring.
usage
var CanvasRenderer = ; var renderer = ; //set the current font, text and pixel sizerendererfont = TestFont;rendererfontSize = fontSize;renderertext = text; //optionally do some word wrappingrenderer; //optionally set up align, underline settings, etc...rendereralign = 'left'; { //... //fill the text at the specified x, y position contextfillStyle = 'red'; renderer; //...}
For full API details, see fontpath-simple-renderer, which this module inherits from.
example
See the demo folder for a simple example.