js-pixel-fonts

Pixel fonts in pure JS

Installation

npm install js-pixel-fonts --save

Usage

Examples

Render as an array of pixels, for using elsewhere (e.g. drawing to canvas, controlling LEDs):

const { fonts, renderPixels } = require('js-pixel-fonts');

const pixels = renderPixels("Hi!", fonts.sevenPlus);

/**
 * pixels === [
 *   [ 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1 ],
 *   [ 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1 ],
 *   [ 1, 0, 0, 0, 1, 0, 1, 1, 0, 0, 1 ],
 *   [ 1, 1, 1, 1, 1, 0, 0, 1, 0, 0, 1 ],
 *   [ 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1 ],
 *   [ 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0 ],
 *   [ 1, 0, 0, 0, 1, 0, 1, 1, 1, 0, 1 ]
 * ]
 */

Render as a PNG: see samples.js.

API

fonts

Set of available fonts. Each font has a glyphs property describing the font, but all you need to do is pass the whole font object into one of the render... methods.

renderPixels(text, font)

Renders the supplied text string in the specified font as an array of arrays of pixels. Each array represents a single row, with each element (1 or 0) representing whether the pixel should be active or not.

renderImage(text, font, renderOptions)

Renders the supplied text string in the specified font as an image. Returns a stream of PNG data that can be piped to a file or elsewhere. fontOptions takes the following properties:

• foreground: array of RGB(A) values, 0-255 (alpha channel defaults to 255 if not specified) for the text colour
• background: array of RGB(A) values, 0-255 (alpha channel defaults to 255 if not specified) for the background colour of the image
• scale (default 1): scaling factor (number of pixels per single pixel in the underlying font)