Node / Text Rendering · guide
Fill colour & gradients
Current Apexify.js 6.0.0 documentation for Fill colour & gradients.
Prefer fill.color / fill.gradient / fill.opacity; legacy color, gradient, opacity merge through resolveTextFill (nested wins).
Solid fill
Gradients (gradient type)
Supported gradient.type values: linear, radial, conic (lib-next/types/gradient).
Shared concepts:
| Concept | Notes |
|---|---|
colors | { stop: number; color: string }[] — required on every gradient. |
repeat | linear / radial only: no-repeat (default), repeat, reflect — builds a tiled CanvasPattern when not no-repeat. |
rotate, pivotX, pivotY | radial/conic read centres/radii/angles from gradient.* fields; linear fills/strokes use gx0/gx1/y from renderTextFill (gradient.startX etc. on linear are not applied there today — use conic if you need a rotated sweep across glyphs). |
Linear
Uses createLinearGradient(startX, startY, endX, endY). For plain lines, renderTextFill spans gx0 → gx1 at baseline y (left/right edges of measured advance unless centerGlyph mode).
Radial
Passes startX/startY/startRadius and endX/endY/endRadius through to createRadialGradient (defaults fold toward measured bounds).
Conic
Uses createConicGradient(angleRad, centerX, centerY) — centerX/centerY default to the midpoint between startX/startY and endX/endY when omitted (createTextGradient).
Stroke & decoration gradients
stroke.gradient and decoration underline/overline/strikethrough object gradient use the same gradient union via createTextGradient (text-style.ts).
Implementation note
Invalid gradient (missing type or colors) throws Invalid gradient options from createTextGradient.