node-canvas-text
DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/node-canvas-text package

1.0.2 • Public • Published

node-canvas-text

Draws your string on a canvas, fit inside of a rectangle. I had to make this, because measureText() from node-canvas is unpredictable, and ignores font selectors besides font-size and font-family.

Requirements:

Installation

npm 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 }

Options

  • 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

{
    minSize: 10,
    maxSize: 200,
    granularity: 1,
    hAlign: 'left',
    vAlign: 'bottom',
    fitMethod: 'box',
    textFillStyle: '#000',
    rectFillStyle: '#fff',
    rectFillOnlyText: false,
    textPadding: 0,
    fillPadding: 0,
    drawRect: false
}

Fit method: box vs baseline

fitMethod: box fitMethod: baseline

Example

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 });

Package Sidebar

Install

npm i node-canvas-text

Weekly Downloads

89

Version

1.0.2

License

ISC

Last publish

Collaborators

  • kaivi