Skip to content

Render a string to canvas, breaking it up into multiple lines to fit the given width.

License

Notifications You must be signed in to change notification settings

petervdn/multiline-canvas-text

Repository files navigation

multiline-canvas-text

Render a string to canvas, breaking it up into multiple lines to fit the given width.

install

npm install multiline-canvas-text

demo

Check out the interactive example.

usage

import { drawText } from "multiline-canvas-text";

const text = 'The quick brown fox jumps over the lazy dog';
const width = 40;         // width in pixels to fit the text
const font = 'Arial';     // font should be available in the page
const fontSize = 20;      // in pixels
const lineSpacing = 1;    // vertical spacing between the lines
const color = 'white';    // can be any valid css color string: 'black', '#FFF', 'rgba(0,0,0,0.5)', etc
const strokeText = false; // true results in calling strokeText instead of fillText
const align = 'center';   // can be 'left', 'right' or 'center'

const result = drawText(text, width, font, fontSize, lineSpacing, color, strokeText, align);

element.appendChild(result.canvas);

The result object contains 3 properties:

  • canvas: The generated canvas element with the rendered text. This canvas has the width that was given to the drawText method, but can obviously vary in height.
  • lines: An array that shows how the string was broken up into multiple lines, for example: ["The quick brown", "fox jumps over", "the lazy dog"]
  • cursor: if you are replicating an interactive textfield in canvas, you may want to add a blinking cursor to increase the user experience. The cursor property holds x and y values for where to draw it. This value is not correct at the moment!

About

Render a string to canvas, breaking it up into multiple lines to fit the given width.

Resources

License

Stars

Watchers

Forks

Packages

No packages published