canvas-multiline-emoji v1.0.4

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.

Dependencies

This module requires some kind of Canvas object.

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