A JavaScript implementation of the bitmap fonts from SerenityOS
BSD-2-CLAUSE License
This is a JavaScript translation/implementaion of the bitmap fonts from SerenityOS.
Demo: https://macdue.github.io/LibFont.js/
// TODO: Make a nicer README.md :^)
Example usage:
const canvas = document.getElementById("some-canvas");
const ctx = canvas.getContext('2d');
// Set the fillStyle to any color you like!
ctx.fillStyle = 'black';
LibFont.BitmapFont.loadFont('./KaticaBold10.font').then(font => {
font.drawTextInto(ctx, 10, 10, "Well, hello friends!");
})
LibFont.BitmapFont.loadFont(url) -> Promise<BitmapFont>
.font
file from a URLLibFont.BitmapFont.loadFontFromArrayBuffer(buffer) -> BitmapFont
.font
file from an array bufferLibFont.BitmapFont.loadFontFromUint8Array(array) -> BitmapFont
.font
from a uint8 arrayfont.drawTextInto(canvasCtx, drawX, drawY, text)
(drawX, drawY)
font.glyph(codepoint) -> Glpyh
codepoint
font.glyphIndex(codepoint) -> integer
codepoint
font.containsGlyph(codepoint) -> bool
codepoint
font.forEachGlyph(text, callback)
font.forEachFontGlyph(callback)
font.textWidth(text) -> integer
font.getTextAsDataURL(text, fillStyle='black') -> string
src
of an img
tag)font.getTextAsHTML(text, fillStyle='black') -> HTMLElement
font.accurateGlyphCount()
font.glyphCount
)font.name
font.family
font.glyphWidth
font.glyphHeight
font.minGlyphWidth
font.maxGlyphWidth
font.glyphSpacing
font.baseline
font.meanLine
font.presentationSize
font.weight
font.slope
font.fixedWidth
font.glyphCount
glyph.toDataURL(fillStyle='black') -> string
src
of an img
tag)glyph.bitmap
(is a GlyphBitmap
)glyph.leftBearing
glyph.advance
glyph.ascent
LibFont.GlyphBitmap.bytesPerRow()
bitmap.paintInto(canvasCtx, x, y)
(x, y)
bitmap.bitAt(x,y)
(x, y)
bitmap.row(index)
bitmap.rowSlice(y)
bitmap.width
bitmap.height