Canvas Txt 📐

Text boxes for HTML5 canvas. Draw a box, hand it a string — wrapping, alignment, clipping and justification in one call.

Live playground  ·  JSFiddle  ·  API  ·  Performance  ·  Migrating from v4

import { drawText } from 'canvas-txt'

drawText(ctx, 'Lorem ipsum dolor sit amet', {
  x: 100, y: 200, width: 200, height: 200,
  fontSize: 24,
})

That's the whole integration. Zero dependencies, ~4 kB gzipped, works in browsers, workers (OffscreenCanvas), node-canvas and skia-canvas.

npm i canvas-txt

Or from a CDN — the global window.canvasTxt carries the same functions:

<script src="//unpkg.com/canvas-txt"></script>

import { drawText } from 'canvas-txt'

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

const { height, width, lines } = drawText(ctx, 'Hello world', {
  x: 100,
  y: 200,
  width: 200,
  height: 200,
  fontSize: 24,
})

Try it live in this JSFiddle.

drawText is a convenience wrapper. For anything that redraws — animation loops, canvas editors, data grids — lay out once and paint the cached layout:

import { layoutText, drawTextLayout } from 'canvas-txt'

const layout = layoutText(ctx, text, { width: 300, height: 200, fontSize: 18 })

// every frame, as often as you like — no re-measuring:
drawTextLayout(ctx, layout, { x: 50, y: 40 })
drawTextLayout(ctx, layout, { x: 400, y: 40, style: { fill: '#888' } })

// layout.lines → [{ text, x, y, width, words }] — hit-test it, decorate it
// layout.height, layout.width, layout.clipped

If you want the box in the image above — draggable anchors that control x/y/width/height — that interaction layer is yours to build, and it's small: keep the box rectangle in your own state, hit-test pointer events against its corners and edges, update the state on drag, and re-render (draw your selection chrome, then drawText, or repaint a cached layoutText result — layout.lines gives you per-line positions if you need finer hit-testing). This JSFiddle is a complete working example — drag, resize from any handle, live re-wrap — in about 100 lines, and our playground (source) uses the same approach. This is deliberately not part of the library: canvas-txt only handles the rendering, because rendering is the one piece that's identical everywhere — pointer handling belongs to your app's event model, whether that's React state, a Vue component, or an immediate-mode game loop. Staying out of it is what lets canvas-txt drop into any of them.

Works with node-canvas and skia-canvas directly — no type casts needed:

import { createCanvas } from 'canvas'
import { drawText } from 'canvas-txt'
import * as fs from 'node:fs'

const canvas = createCanvas(400, 400)
const ctx = canvas.getContext('2d')

drawText(ctx, 'Hello World!', {
  x: 100, y: 200, width: 200, height: 200, fontSize: 24,
})

fs.writeFileSync('output.png', canvas.toBuffer('image/png'))

Without style, text uses the context's current fillStyle:

ctx.fillStyle = '#ff0000'
drawText(ctx, 'Red text', { x: 0, y: 0, width: 200, height: 200 })

// or per call, with an optional outline:
drawText(ctx, 'Outlined', {
  x: 0, y: 0, width: 200, height: 200,
  style: { fill: '#fff', stroke: '#0C8CE9', strokeWidth: 2 },
})

import {
  drawText, layoutText, drawTextLayout,
  measureText, splitText, getTextHeight,
  clearMeasurementCache,
} from 'canvas-txt'

Segment widths live in a module-level per-font cache and identical layouts are memoized (bounded, ~500 entries), so steady-state layout is arithmetic and lookups — not measureText calls. Memoized layouts come back frozen; treat them as immutable.

Measured against canvas-hypertxt's standard mode — 5000 iterations, 600-char strings, node-canvas, Apple Silicon (benchmark in packages/canvas-txt/bench):

Only hypertxt's estimation mode ("hyper wrapping", which guesses widths instead of measuring) is faster on long never-before-seen strings — with exact measuring, canvas-txt is the faster library while staying Unicode-correct.

document.fonts.ready.then(() => clearMeasurementCache())

The repo is a pnpm workspace: the library lives in packages/canvas-txt, the playground in apps/docs.

pnpm install
pnpm dev        # playground with the library hot-reloading
pnpm test       # vitest against real canvas metrics (node-canvas)
pnpm build      # esm + cjs + iife + d.ts

MIT © Geon George