Node / Text Rendering · guide
Glow, shadow & stroke
Current Apexify.js 6.0.0 documentation for Glow, shadow & stroke.
Group halo/shadow under effects (effects.glow, effects.shadow) — legacy top-level glow / shadow still merge (resolveTextEffects).
Per straight line, renderEnhancedTextLine composites in this order — details in Paint order:
highlight → glow → shadow → stroke → fill → decorations
Arc mode repeats the same ordering per grapheme in local tangent space (renderRotatedGlyph).
Glow — effects.glow
| Key | Role |
|---|---|
color | shadowColor when gradient omitted (default #ffffff vibe via blur stack). |
gradient | Two-pass fillText: blurred halo using placeholder shadow colour, then gradient fillText overlay (renderTextGlow). |
intensity | Maps to shadowBlur pixels (default 10). |
opacity | globalAlpha during glow passes (default 0.8). |
Glow fillText runs before the main renderTextFill — final glyph colour always comes from the dedicated fill pass.
Shadow — effects.shadow
Uses Canvas shadow properties (not the same shape as ShadowOptions on createImage).
| Key | Default | Notes |
|---|---|---|
color | rgba(0,0,0,0.5) | shadowColor without gradient. |
gradient | — | Builds horizontal gradient; shadowColor borrows first stop tint for blur composite. |
offsetX, offsetY | 2 | shadowOffsetX / shadowOffsetY. |
blur | 4 | shadowBlur. |
opacity | 1 when colour-only | Sets globalAlpha when provided. |
Stroke — stroke
| Key | Role |
|---|---|
color | strokeStyle fallback (#000000). |
width | lineWidth (default 1). |
gradient | Horizontal gradient across measured advance (gx0 → gx1). |
opacity | globalAlpha during strokeText passes. |
style | solid, dashed, dotted, groove, ridge, double — dashed/dotted dash gaps scale with stroke width; groove/ridge/double multi-pass (renderComplexTextStroke). |
SOURCEtypescript
typescript