Render bitmap pixel fonts to canvas without anti-aliasing!
top is pixel-text
, bottom is canvas's default fillText
- 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!');
Returns Promise with font object
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'
}
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
- Add bounding box to draw options
- Add vertical and horizontal text alignment to draw options
- Add wrapping to draw options