Skip to content

Latest commit

 

History

History
106 lines (81 loc) · 2.85 KB

README.md

File metadata and controls

106 lines (81 loc) · 2.85 KB
Raw

LibFont.js

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!");
})

API

BitmapFont

Static Methods:

  • LibFont.BitmapFont.loadFont(url) -> Promise<BitmapFont>
    • Load a .font file from a URL
  • LibFont.BitmapFont.loadFontFromArrayBuffer(buffer) -> BitmapFont
    • Load a .font file from an array buffer
  • LibFont.BitmapFont.loadFontFromUint8Array(array) -> BitmapFont
    • Load a .font from a uint8 array

Class Methods:

  • font.drawTextInto(canvasCtx, drawX, drawY, text)
    • Draw a some text into a canvas at (drawX, drawY)
  • font.glyph(codepoint) -> Glpyh
    • Lookup the glyph for codepoint
  • font.glyphIndex(codepoint) -> integer
    • Look up the glyph index for codepoint
  • font.containsGlyph(codepoint) -> bool
    • Check if a font contains a glyph for codepoint
  • font.forEachGlyph(text, callback)
    • Iterate over all glyphs in some text
  • font.forEachFontGlyph(callback)
    • Iterate over all the non-empty glyphs in the font
  • font.textWidth(text) -> integer
    • Get the width of some text (in pixels)
  • font.getTextAsDataURL(text, fillStyle='black') -> string
    • Get some text as a data URL image (that can be used as the src of an img tag)
  • font.getTextAsHTML(text, fillStyle='black') -> HTMLElement
    • Get some text as a HTML element, when inserted onto a page this is copyable and supports word wrapping
  • font.accurateGlyphCount()
    • Calculate the number of actual glyphs in the font (this is not the same as font.glyphCount)

Properties:

  • 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

Class Methods:

  • glyph.toDataURL(fillStyle='black') -> string
    • Converts the glyph into a data URL image (that can be used as the src of an img tag)

Properties:

  • glyph.bitmap (is a GlyphBitmap)
  • glyph.leftBearing
  • glyph.advance
  • glyph.ascent

GlyphBitmap

Static Methods:

  • LibFont.GlyphBitmap.bytesPerRow()

Class Methods:

  • bitmap.paintInto(canvasCtx, x, y)
    • Paint a glyph bitmap into a canvas at (x, y)
  • bitmap.bitAt(x,y)
    • Look up the pixel (bit) of a glyph at (x, y)
  • bitmap.row(index)
  • bitmap.rowSlice(y)

Properties:

  • bitmap.width
  • bitmap.height