Draws text in a rectangle on a canvas, on multiple lines.

Instalattion

To install use:

npm i canvas-multiline-emoji

Usage

Exports a single function that draws text on a canvas, breaking it into multiple lines if needed.

Also shrinks the font size to make in fit in the defined rectangle.

Returns the font size used

const fontSize = await drawText(canvas2Dcontext, text, options);

Example

import fs from 'node:fs';
import { Canvas } from 'canvas';
import { drawText } from 'canvas-multiline-emoji';

const canvas = new Canvas(500, 500);
const ctx = canvas.getContext('2d');
const text = 'The old rusted farm equipment 🤪 surrounded the house predicting its demise. He uses onomatopoeia as a weapon of mental destruction. 👍';
const options = {
    font: 'OpenSans',
    verbose: true,
    rect: {
        x: 50,
        y: 50,
        width: canvas.width - (50 * 2),
        height: canvas.height - (50 * 2),
    },
    minFontSize: 10,
    maxFontSize: 40,
    lineHeight: 1.2
};

const test = async () => {
    /* --- background --- */
    ctx.fillStyle = '#4a4aad';
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    /* --- font color --- */
    ctx.fillStyle = '#ceceec';
    
    const fontSizeUsed = await drawText(ctx, text, options);
    console.log('Font size used: ', fontSizeUsed);

    const buffer = canvas.toBuffer();
    fs.writeFileSync('test.png', buffer);
};

test();

Options

The options type is defined as MultilineOptions and (almost) all its keys are optional.

| Parameter | Description | Default | | :-----------: | -------------------------------------------------------------------------- | ------------- | | font | Font name / family to use | sans-serif | | rect | Rectangle object with x, y, width, height. Text will be drawn inside this. | Canvas Size | | minFontSize | Minimum font size to use. | 8 | | maxFontSize | Maximum font size to use. | 100 | | lineHeight | Multiplicator for line height | 1 | | stroke | Defines whether strokeText will be used instead of fillText | false | | verbose | Defines whether if should print debug info | false | | logFunction | Custome function for logging. | console.log |

Dependencies

This module requires some kind of Canvas object.

Inspired on: https://gitlab.com/davideblasutto/canvas-multiline-text