https://github.com/iFraan/canvas-multiline-emoji

Type safe multiline text on canvas with emoji support
https://github.com/iFraan/canvas-multiline-emoji

canvas emoji multiline text twemoji

Last synced: 6 days ago
JSON representation

Type safe multiline text on canvas with emoji support

• Host: GitHub
• URL: https://github.com/iFraan/canvas-multiline-emoji
• Owner: iFraan
• Created: 2024-01-05T18:51:19.000Z (10 months ago)
• Default Branch: master
• Last Pushed: 2024-02-20T15:02:01.000Z (9 months ago)
• Last Synced: 2024-10-02T00:12:04.492Z (about 1 month ago)
• Topics: canvas, emoji, multiline, text, twemoji
• Language: TypeScript
• Homepage:
• Size: 65.4 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        


    
canvas-multiline-emoji

    

        

    

    

        

    

    

        

    

    

        

    

    

        

    

    
Typesafe multiline text on canvas with emoji support



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

## Instalattion

To install use:

```shell

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

```ts

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

```

### Example

```js

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