Using a provided Opentype.js font object, draws a string, sized to fit inside a given rectangle on an HTML5 canvas
npm install node-canvas-textnpm install node-canvas-text canvas opentype.js --save`
Parameters
This module exports a single function with signature:
1. context from node-canvas
2. a string to draw
3. font object
4. bounding rectangle `{ x, y, width, height }`
5. options `{ minSize, maxSize, granularity, hAlign, vAlign, fitMethod, drawRect }`
$3
* minSize: minimum font size `float`
* maxSize: maximum font size `float`
* granularity: a step, in which to scale font size `float`
* hAlign: horizontal text alignment `'left' | 'center' | 'right'`
* vAlign: vertical text alignment `'top' | 'center' | 'bottom'`
* fitMethod: `'baseline' | 'box'`
* drawRect: draw the bounding rectangle `'true' | 'false'`
* textFillStyle: fill style for text `string`
* rectFillStyle: fill style for rectangle `string`
* rectFillOnlyText: fill only the exact resulting text rectangle, not the bounding one `'true' | 'false'`
* textPadding: text padding `float`
* fillPadding: fill padding `float`
#### Defaults
`javascript
{
minSize: 10,
maxSize: 200,
granularity: 1,
hAlign: 'left',
vAlign: 'bottom',
fitMethod: 'box',
textFillStyle: '#000',
rectFillStyle: '#fff',
rectFillOnlyText: false,
textPadding: 0,
fillPadding: 0,
drawRect: false
}
`
$3
!fitMethod: box
!fitMethod: baseline
Example
`javascript
import drawText from 'node-canvas-text'
import opentype from 'opentype.js'
import Canvas from 'canvas'
let canvas = new Canvas(imgWidth, imgHeight);
let ctx = canvas.getContext('2d');
// Load OpenType fonts from files
let titleFont = opentype.loadSync(__dirname + '/fonts/PTN57F.ttf');
let priceFont = opentype.loadSync(__dirname + '/fonts/PTC75F.ttf');
let barcodeFont = opentype.loadSync(__dirname + '/fonts/code128.ttf');
// Strings to draw
let titleString = "A string, but not too long",
priceString = "200",
barcodeString = "54490000052117";
// Calculate bounding rectangles
let headerRect = {
x: 0,
y: 0,
width: canvas.width,
height: canvas.height / 3.5 };
let priceRect = {
x: canvas.width / 2,
y: headerRect.height,
width: canvas.width / 2,
height: canvas.height - headerRect.height };
let barcodeRect = {
x: 0,
y: headerRect.height + priceRect.height / 2,
width: canvas.width - priceRect.width,
height: priceRect.height / 2
};
// Draw
let drawRect = true;
drawText(ctx, titleString, titleFont, headerRect,
{
minSize: 5,
maxSize: 100,
vAlign: 'bottom',
hAlign: 'left',
fitMethod: 'box',
drawRect: drawRect} );
drawText(ctx, priceString, priceFont, priceRect,
{
minSize: 5,
maxSize: 200,
hAlign: 'right',
vAlign: 'bottom',
fitMethod: 'box',
drawRect: drawRect } );
drawText(ctx, barcodeString, barcodeFont, barcodeRect,
{
minSize: 5,
maxSize: 200,
hAlign: 'center',
vAlign: 'center',
fitMethod: 'box',
drawRect: drawRect });
``