Rich Text for Canvas
↑ This headline is a live text box. Click it to edit.
Works with a standard HTML canvas element. No canvas library required.
Text boxes are Konva nodes. Add them to your stage like any other shape.
Free to install and develop with. You need a license to go live.
Install the package and create a text box. Typing, selection, copy and paste, undo and resize handles are all included.
npm install @mycreativeshop/rich-textYou keep full control of your toolbar, selection and styling.
import { createCanvasRichText, createDocumentFromText }
from "@mycreativeshop/rich-text";
// Works with any HTML canvas element
const rt = createCanvasRichText({ onChange: render });
rt.addBox({ x: 40, y: 40, width: 400,
document: createDocumentFromText("Grand opening", 48) });
function render() {
drawYourScene(ctx);
rt.paint(ctx); // the text
rt.paintOverlay(ctx); // cursor, selection, handles
}import { enableRichText, RichText, createDocumentFromText }
from "@mycreativeshop/rich-text/konva";
// Turn on editing for a Konva stage
const rt = enableRichText(stage);
layer.add(new RichText({
x: 40, y: 40, width: 400, draggable: true,
document: createDocumentFromText("Grand opening", 48),
}));The canvas API only draws plain text: fillText() draws one line in one style, and browsers draw it slightly differently. Everything else is yours to build, and each piece below is a large project on its own. Rich Text for Canvas includes all of them.
Break text into lines when one line mixes sizes, and handle words too long for the box.
Kerning, ligatures and accents. The canvas API doesn't expose them, so you need a shaping engine.
Different fonts, sizes and colors in one paragraph, measured and lined up on a shared baseline.
Place the cursor between letters, select across lines and styles, and support every keyboard shortcut.
Keep styles when copying between text boxes, and clean up text pasted from other apps.
Record every edit, style change, move and resize so each one can be undone.
Wait for fonts before measuring, and find a font for characters the chosen one lacks.
Draw letters as shapes from the font file, so text looks the same in every browser and in print.
Each feature opens a live example in the demo.
These are cases real users run into. Each one is handled, and each one is covered by automated tests.
The cursor lands exactly where you click, and moves correctly across lines, mixed sizes and lists.
Line breaks become new paragraphs, so pasted text keeps its shape.
Misspelled words are underlined, with suggestions, Add to dictionary and Ignore on right-click.
Load fonts from your server, a font vendor, or a file your user uploads. If a font can't load, you're told why.
It is drawn from a fallback font, and only that character is downloaded.
Real weights are used when the font has them, and bold is synthesized only when it doesn't.
Drawn from one emoji set, so they look the same on every device and in print.
Shaped with HarfBuzz, so letters join and stack correctly.
Corner handles scale the text with the box, never out of proportion. Side handles rewrap it.
It shrinks to fit, so a paragraph pasted into a headline still fits.
Every edit, move and resize is one undo step.
Vector rendering draws identical pixels in each one.
More than 1,300 automated tests run in real browsers. Rendered text is compared pixel by pixel with approved images, on HTML canvas and on Konva.
It's the text engine in the MyCreativeShop design editor. Customers use it every day to make flyers, postcards and signs that get printed and mailed.
Built and maintained by the team that depends on it. Email support, and updates when browsers change.
We built it because our own editor needed it. Every fix we make for our customers ships to yours.