Canvas Fit Text

Update After some more testing, the intended functionality does not work at larger font sizes; I don't remember specifics. Give it a whirl if you want, but seems to only work well at small font sizes.

Fit-text for canvas, with optional line-wrapping.
Integrates with and preserves the context's current font value.

Installation

Install w/ yarn or npm...

yarn add canvas-fit-text

...and import into your projct.

# ES6
import fitText from 'canvas-fit-text';

# or CommonJS
var fitText = require('canvas-fit-text');

Or download the repo and copy dist/canvas-fit-text.js to your project.

Usage

CanvasFitText extends the native CanvasRenderingContext2D.
Use it directly on the context.

let canvas = document.querySelect('canvas'),
  ctx = canvas.getContext('2d');

// Fit to width 200px.
ctx.fitText('Hello world!', 0, 0, 200);

// Fit to width 200px.
// Constrain to height 100px (which also enables line wrapping)
let text = 'Hello world! How are you? Ok byeee!';
ctx.fitText(text, 0, 0, 200, 100);

Original context font value is preserved (after fit).

let canvas = document.querySelect('canvas'),
  ctx = canvas.getContext('2d');

// Current font
ctx.font = '12px sans-serif';

// Will print at ~439px sans-serif
ctx.fitText('foo', 0, 0, 600);

// Font was reverted back.
console.log(ctx.font);
// ➜ 12px sans-serif

Usage args

| Arg | Required | Description | Type | | -------- | -------- | ---------------------------------------------------------- | ------ | | text | Yes | The text to print | String | | x | Yes | X coordinate to start printing | String | | y | Yes | Y coordinate to start printing | String | | width | Yes | Max width text can expand to | Number | | height | No | Enables line wrapping. Sets max height text can expand to. | Number |

Notes

Setting height will constrain max-height. Not min-height. So, setting width and height will often leave vertical and horizontal space.

With only the width prop, the text will fit horizontally right to the edge.