tinyfont
v1.3.2
Published
Tiniest possible pixel font for your js games (suitable for js13k)
Downloads
5
Readme
tinyfont.js
Tiniest possible pixel font for your JS games (<700b zipped, suitable for js13k): Demo
Inspired by https://github.com/PaulBGD/PixelFont
install
yarn add tinyfont
import...
if you use ES-modules in the browser:
import { initFont } from 'node_modules/tinyfont/src/index.js';
// Load the desired font
import { font } from 'node_modules/tinyfont/src/fonts/pixel.js';
if you use Common JS or ES modules with a bundler like webpack or rollup:
import { initFont, font } from 'tinyfont';
render:
// Get the canvas context
const ctx = document.querySelector('canvas').getContext('2d');
// Init the tinyfont and get the `render` function
const render = initFont(font, ctx);
// Show the string on the screen
render('Simple example');
render('Complex stuff', 100, 100, 50, 'red');
render function signature:
render(string, x, y, size, color)
- x: horizontal coordinate, px (default: 0)
- y: vertical coordinate, px (default: 0)
- size: font height, px (default: 24)
- color: font color, string (default: '#000')
use different fonts:
Builtin fonts:
pixel
(default, based on Pixel Font)tiny
(Based on game over Font)
import from a browser:
import { font } from 'node_modules/tinyfont/src/fonts/tiny.js';
import using a bundler:
import { initFont, font } from 'tinyfont/font-tiny';