CanvasBMF

Small and simple library for drawing AngelCode Bitmap Font Generator and BMFontGen produced bitmap fonts into HTML5 <canvas> element.

Download source or minified source. Licensed under MIT license.

Example:

(Enable javascript to see example)

Basic usage:

CanvasBMF.loadFont({file: "DejaVu Serif.fnt", callback: function (font) {

    if (font.error) throw "Failed to load font";

    var canvas = document.getElementById("canvas");

    var text = new CanvasBMF.Text({

        context: canvas.getContext("2d"),
        text: "Hello World!",
        font: font,
        x: canvas.width / 2,
        y: canvas.height / 2,
        align: "center",
        valign: "middle"

    });

    text.draw();

}});
		

CanvasBMF.loadFont parameters:

file – (Required) Font xml/etc. file to be loaded and parsed

callback – Function to be called once font and bitmaps finish loading.

name – Set font face name. If omitted, read name from font xml file (AngelCode only) or use filename w/o extension

imagePath – Set font bitmap image search path. By default this is relative to font xml file

images – Array of either image objects or src strings to be used as font bitmaps.

CanvasBMF.Text parameters:

context – (Required) Canvas drawing context

text – (Required) Text content

font – (Required) Bitmap font/-name

x – Canvas x coordinate

y – Canvas y coordinate

align – Text horizontal alignment. Possible values: left (default), center, right, justify, flush

valign – Text vertical alignment. Possible values: top (default), middle, bottom

lineHeight – Text line height. If false, use default line height from font xml file.

maxWidth – Enable automatic line wrapping by supplying maximum allowed line width.

spacing – Glyph horizontal spacing

paragraphSpacing – Paragraph vertical spacing. Manual line break in text creates new paragraph

hyphenate – Enable hyphenation

hyphenateChar – Character used to mark hyphenation points in text

hyphen – Hyphen character

wrapChars – String of characters available for line breaking

spaceChars – String of characters used as space between words

roundPixels – Pixel-to-pixel drawing mode. 1:1 scale recommended.