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:
- [x] change font
- [x] change text fill and stroke
- [x] draw multiple lines with correct line height
- [x] textAlign and textBaseline
- [x] basic support for direction (LTR or RTL)
- [x] scale text
- [x] vertical offset
- [x] shadows
- [x] inherits style from canvas context by default
- [x] supports pre-rendering for super-fast drawing
- [x] no runtime dependencies!
- [x] somewhat tested!
Not supported:
- [ ] automatic word wrapping (maybe someday)
- [ ] vertical text
npm i -s canvas-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,
);
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}},
]);
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);
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:
- Install Docker
- Run
pnpm test
to build the Docker image and run Playwright in it