Node / Text Rendering · guide
Font, alignment & transforms
Current Apexify.js 6.0.0 documentation for Font, alignment & transforms.
Placement is anchored at (x, y) using Canvas textAlign and textBaseline. Optional rotation spins the entire block around (x, y) before lines are laid out.
Font configuration (font)
Prefer the nested font object; legacy top-level aliases remain.
| Field | Purpose |
|---|---|
font.size | Pixels (default 16). |
font.family | Installed face family (e.g. Arial). Passed through to the CSS font string as "${size}px \"${family}\"". |
font.name | Logical font family name used together with font.path when registering the file (GlobalFonts.registerFromPath). |
font.path | Path to .ttf, .otf, .woff — resolved relative to process.cwd() unless absolute. |
Legacy aliases: fontSize, fontFamily, fontName, fontPath (nested font.* wins when both are set).
When font.path is set, registerTextFontFromPath runs before each layer paints. Registration failures console.warn and drawing continues with the fallback family string.
Weight & slant (decorations)
| Field | Effect |
|---|---|
decorations.bold | Prefix bold on the CSS font string. |
decorations.italic | Prefix italic. |
Legacy bold / italic at the top level work the same way; decorations wins if both are provided (resolveTextDecorations).
Placement (placement)
Prefer placement; flat textAlign, textBaseline, and rotation are aliases (resolveTextPlacement).
| Field | Type | Role |
|---|---|---|
textAlign | TextAlignMode | left, center, right, start, end — Canvas ctx.textAlign. |
textBaseline | TextBaselineMode | alphabetic (default), top, hanging, middle, ideographic, bottom — Canvas ctx.textBaseline. |
rotation | number (degrees) | Rotates **around (x, y): translate(x,y) → rotate → translate(-x,-y). |
Fill opacity (fill.opacity)
placement.rotation runs first (applyTextTransformations), then fill.opacity clamps ctx.globalAlpha to [0, 1]. Use fill.opacity (or legacy opacity) for uniform transparency over highlight/glow/shadow/stroke/fill/decoration passes within that layer.
Implementation reference
Font string assembly and spacing hooks live in setupTextFont; alignment in setupTextAlignment (lib-next/text/text-layout.ts).