Canvas-styled-text NPM

canvas-styled-text

fillText and strokeText but with support for multiple lines and multiple fonts and styles in one block of text! This is an overengineered solution to my simple problem of drawing subscript text in canvas. Some extra features have crept in.

This is inspired by but not conforming to the canvas-formatted-text WICG proposal. (Hopefully this will be unnecessary someday!)

Features:

change font
change text fill and stroke
draw multiple lines with correct line height
textAlign and textBaseline
basic support for direction (LTR or RTL)
scale text
vertical offset
shadows
inherits style from canvas context by default
supports pre-rendering for super-fast drawing
no runtime dependencies!
somewhat tested!

Not supported:

automatic word wrapping (maybe someday)
vertical text

Installation

npm i -s canvas-styled-text

Use it!

Draw styled text

import {drawStyledText} from 'canvas-styled-text';

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// draws boring unformatted strings if you want
drawStyledText(ctx, 'Hello world', 100, 100);

// supports textAlign and textBaseline (must be set globally)
ctx.textAlign = 'center';
ctx.textBaseline = 'center';

// the fun part: multiple spans of text
drawStyledText(
  ctx,
  [
    // spans are concatenated in order...
    'Hello',
    // you can override style props for each text span
    {text: 'world', style: {fill: 'red'}},
    // you can put a newline anywhere, it will work as expected
    '!\n',
    // style props mirror those available in canvas
    {text: 'New font', style: {font: '10px serif'}},
    // you can do some basic typesetting (this looks like a superscript)
    {text: '2', style: {scale: 0.75, top: {value: -30, unit: '%'}}},
  ],
  100,
  200,
);

Measure styled text

import {measureStyledText} from 'canvas-styled-text';

// ...

// produces a single TextMetrics object, like ctx.measureText()
const metrics = measureStyledText(ctx, [
  {text: 'Hello\n'},
  {text: 'world!', style: {scale: 1.2}},
]);

Cache for performance

You can create a PrestyledText when you're drawing the same text with the same style frequently. The text metrics are computed and the text is rendered to an offscreen canvas lazily, so that drawing the text only requires an image copy. Keep in mind that it doesn't inherit styles from the context.

import {PrestyledText, drawStyledText} from 'canvas-styled-text';

const text = new PrestyledText('Hello cache!', {
  fill: 'purple',
  align: 'center',
  baseline: 'middle',
});

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

drawStyledText(ctx, text, 100, 100);

PrestyledText respects the current transformation of the canvas. If you change the scale of the canvas by a noticeable amount, the cached rendering is automatically updated for the new scale.

const text = new PrestyledText('Hello cache!', {
  fill: 'purple',
  align: 'center',
  baseline: 'middle',
});

ctx.translate(100, 100);
ctx.rotate(0.1);
ctx.scale(2);
drawStyledText(ctx, text, 0, 0);

Running tests

I use Ladle for stories and Playwright to generate snapshot images of them. Unfortunately, because this project is about text rendering, we need to run in Docker for consistent font rendering.

To run tests: