JSPM

canvas-multiline-text

1.0.3
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 66
  • Score
    100M100P100Q66397F
  • License ISC

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

Package Exports

  • canvas-multiline-text

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (canvas-multiline-text) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

canvas-multiline-text

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

It was conceived to be used on Node.js with Automattic's implementation of Canvas node-canvas, but it should work in browsers too.

Initialy developed for ISBOBackend.

Usage

This module exports a single function that draws a text on a canvas' 2d context, breaking it in multiple lines if necessary.

The function also returns the used font size for drawing text.

drawMultilineText(text, context, options)

Example

const canvas = new Canvas(500, 300)
const drawMultilineText = require('canvas-multiline-text')

const fontSizeUsed = drawMultilineText(
    canvas.getContext('2d'),
    "Please could you stop the noise, I'm trying to get some rest from all the unborn chicken voices in my head. What's that? What's that?",
    {
        rect: {
            x: 10,
            y: 10,
            width: canvas.width - 20,
            height: canvas.height - 20
        },
        font: 'Merriweather',
        verbose: true,
        lineHeight: 1.4,
        minFontSize: 15,
        maxFontSize: 120
)

console.log('Text drawn with font size: ', fontSizeUsed)

Options

The whole options parameter is optional.

  • font - Used font name or font family. Default is sans-serif.
  • minFontSize - Min font size for text. Default is 30.
  • maxFontSize - Max font size for text. Default is 100.
  • rect - Area for text. Default is { x: 0, y: 0, width: ctx.canvas.width, height: ctx.canvas.height }.
  • stroke - If true, strokeText() wil be used instead of fillText(). Default is false.
  • lineHeight - Multiplicator for line height. Default is 1.1.
  • verbose - If true, greenlock-express will log (see below) the server bootstrap.
  • logFunction - Custom function for logging, with signature logFunction(message). Default is console.log.

Dependencies

This module require some kind of Canvas object, so in Node.js you'll need to have node-canvas installed, even if it's not in this module's dependencies list.