Node / Text Rendering · guide
Text rendering (createText) — overview
Current Apexify.js 6.0.0 documentation for Text rendering (createText) — overview.
await painter.createText(textPropsOrArray, canvasBuffer[, painterOpts]) draws styled Unicode strings onto an existing PNG canvasBuffer (from createCanvas, createImage, etc.). Each call returns a new Buffer.
On video: the same TextProperties shape powers createVideo({ addTextOverlay }) and videoPipeline().text() — see Text overlays and Video pipeline.
The runtime pipeline is TextCreator → EnhancedTextRenderer.renderText (lib-next/text/).
Arguments
| Argument | Role |
|---|---|
textPropsOrArray | One TextProperties or an array (processed in order: earlier entries paint underneath later ones). |
canvasBuffer | Buffer or CanvasResults whose buffer field holds PNG (or compatible raster) bytes. |
painterOpts | Optional PainterAssetRefsOptions — same placeholder-resolution hooks as createImage when your props reference assets by ref. |
Required on each object: text, x, y.
Related APIs
| API | Purpose |
|---|---|
await painter.measureText(textProps) | Layout metrics without drawing (TextMetricsCreator — same font/spacing/wrap rules). |
TextCreator.renderTextsOntoContext(ctx, texts) | Paint onto an existing SKRSContext2D (used internally by SceneCreator for type: 'text' layers). |
TextProperties: nested vs flat
Prefer grouped objects font, decorations, effects, layout, placement, and fill. Legacy flat fields (fontSize, color, maxWidth, …) still work.
Merge rule: when both nested and flat exist for the same concept, the nested value wins (resolveTextDecorations, resolveTextEffects, resolveTextLayout, resolveTextPlacement, resolveTextFill in apexify.js / types/text).
Guide map
| # | Topic | What it covers |
|---|---|---|
| 1 | Font & placement | font, decorations.bold/italic, placement (textAlign, textBaseline, rotation), custom font.path |
| 2 | Wrapping & spacing | layout.maxWidth, maxHeight, lineHeight, letterSpacing, wordSpacing |
| 3 | Colour & gradients | fill, gradient types (linear / radial / conic) |
| 4 | Glow, shadow & stroke | effects.glow, effects.shadow, stroke |
| 5 | Decorations & highlight | effects.highlight, underline / overline / strikethrough |
| 6 | Circular arc text | textOnCurve (TextCurveConfig), layoutMode |
| 7 | measureText | TextMetrics, includeCharMetrics, measurementCanvas |
| 8 | Paint order | Exact compositing order per line vs per arc glyph |
| 9 | Field matrix | Full TextProperties checklist |