Pixel Font for Litecanvas

A simple plugin to let you render a pixel font to emulate retro vibes in your Litecanvas projects.

Tip

This plugin is automatically loaded on Litecanvas playground.

Install

npm i @litecanvas/plugin-pixel-font

or

<script src="https://unpkg.com/@litecanvas/plugin-pixel-font"></script>

Usage

import litecanvas from 'litecanvas'
import pluginPixelFont from '@litecanvas/plugin-pixel-font'

litecanvas({
  loop: { draw },
})

use(pluginPixelFont)

function draw() {
  cls(0)

  // activate the default pixel font 8x8
  textfont(PIXEL_FONT_BASIC)

  // or activate the mini pixel font 4x6
  // textfont(PIXEL_FONT_MINI)

  // set the text pixel scale to 300%
  textsize(3)

  // now render your pixelated text
  text(0, 0, 'Hello World')

  // reset the font renderer
  textfont('sans-serif')
  text(0, 50, 'Text with browser font')
}

See this example on playground

API

function text(x: number, y: number, str: string, color?: number): void

Draw a pixelated text in the position (x, y) using color white (3) by default.

Note: The text() 5th param for text style (bold, italic, etc) is disabled in the pixel font.

function textsize(value: number): void

Sets the pixel scale (not the font size). E.g.: textsize(3) scales the pixel font in 3x or 300%.

const PIXEL_FONT_BASIC

The variable that contains information about the pixel font 8x8. Use it as a font family to activate the plugin.

const PIXEL_FONT_MINI

The variable that contains information about the pixel font 4x6. Use it as a font family to activate the plugin.