Decorations & highlight

Put backdrop tint under effects.highlight and typographic rules under decorations (underline, overline, strikethrough). Legacy flat highlight / underline / … still resolve via resolveTextEffects / resolveTextDecorations (nested wins).

#Highlight — effects.highlight

Drawn before glow, shadow, stroke, fill, and line decorations (renderEnhancedTextLine).

Straight baseline: renderTextHighlight draws fillRect(x, highlightY, width, height) with highlightY = y - height * 0.8 — tuned for alphabetic baseline geometry.

Arc text: each glyph uses renderTextHighlightLocal in tangent coordinates (width = measured advance for that grapheme).

#Underline / overline / strikethrough (TextLineDecoration)

Each may be true (inherits fill color + thickness ≈ fontSize * 0.05) or an object:

1underline?: boolean | {2  color?: string;3  gradient?: gradient;4  width?: number;5};

Same shape for overline and strikethrough.

##Placement on straight lines (renderTextDecorations)

Uses ctx.measureText width from x as textAlign defines origin:

Gradient strokes span x → x + measuredWidth at fixed decorationY.

#Example

1await painter.createText(2  {3    text: 'Sale · Today only',4    x: 72,5    y: 140,6    font: { size: 36, family: 'Arial' },7    effects: {8      highlight: { color: '#fef08a', opacity: 0.55 },9    },10    decorations: {11      underline: { color: '#dc2626', width: 3 },12      strikethrough: true,13    },14    fill: { color: '#0f172a' },15  },16  buffer17);