FontImage

Font Image Object - Draw text on a 2D canvas by using characters in an image

  • 96 characters (from space to tilde) are stored in an image
  • Uses a default 8x8 font if none is supplied
  • You can also use fonts from the main tile sheet

Constructor

new FontImage(imageopt, tileSizeopt, paddingSizeopt, contextopt)

Create an image font

Parameters:
NameTypeAttributesDefaultDescription
imageHTMLImageElement<optional>

Image for the font, if undefined default font is used

tileSizeVector2<optional>
(8,8)

Size of the font source tiles

paddingSizeVector2<optional>
(0,1)

How much extra space to add between characters

contextCanvasRenderingContext2D | OffscreenCanvasRenderingContext2D<optional>
overlayContext

context to draw to

Example
// use built in font
const font = new ImageFont;

// draw text
font.drawTextScreen("LittleJS\nHello World!", vec2(200, 50));

Methods

drawText(text, pos, scaleopt, centeropt)

Draw text in world space using the image font

Parameters:
NameTypeAttributesDefaultDescription
textString
posVector2
scaleNumber<optional>
.25
centerBoolean<optional>

drawTextScreen(text, pos, scaleopt, centeropt)

Draw text in screen space using the image font

Parameters:
NameTypeAttributesDefaultDescription
textString
posVector2
scaleNumber<optional>
4
centerBoolean<optional>