pixel-text
Render bitmap pixel fonts to canvas without anti-aliasing!
![](https://raw.githubusercontent.com/jmswrnr/pixel-text/master/./public/comparison.png)
top is pixel-text
, bottom is canvas's default fillText
π¦ Getting Started
- Build a
png
withDivo compatible xml
for the font of your choice using andryblack/fontbuilder - Install the pixel-text module
npm install pixel-text --save
- Start rendering!
const PixelText = require('pixel-text');
const canvas = document.getElementById('demo-canvas');
const font = await PixelText.loadFont(
'/helvetipixel_medium_16.png',
'/helvetipixel_medium_16.xml'
);
const textRenderer = new PixelText.Renderer({
font,
canvas
});
textRenderer.draw(0, 0, 'Hello World!');
βοΈ API
PixelText.loadFont
(pngSrc, xmlUrl)
Returns Promise with font object
PixelText.Renderer
(options)
new options - Object of renderer options
options.font - Font object returned by PixelText.loadFont
.
options.canvas - Canvas element to draw on.
options.color - Default text color. default 'white'
options.colorSymbols - Symbols used to change text color. default:
colorSymbols: {
'π΅': 'blue',
'βͺ': 'white',
'π΄': 'red',
'π ': 'orange',
'π£': 'purple',
'π€': 'brown',
'π‘': 'yellow',
'π’': 'green',
'β«': 'black'
}
PixelText.Renderer.draw
(x, y, text, options)
x - x
position to draw text.
y - y
position to draw text.
text - Text value to draw.
options - Object of draw options.
options.color - Default text color. default 'white'
options.scale - Scale multiplier. default 1
π Todo
- Add bounding box to draw options
- Add vertical and horizontal text alignment to draw options
- Add wrapping to draw options