Skip to content

Add textDecorationColor, textDecorationWidth, and textDecorationStyle for Text#2038

Open
rcoenen wants to merge 1 commit intokonvajs:masterfrom
rcoenen:feat/text-decoration-color
Open

Add textDecorationColor, textDecorationWidth, and textDecorationStyle for Text#2038
rcoenen wants to merge 1 commit intokonvajs:masterfrom
rcoenen:feat/text-decoration-color

Conversation

@rcoenen
Copy link
Copy Markdown

@rcoenen rcoenen commented Mar 18, 2026

Three new properties for Text nodes, mirroring CSS text-decoration sub-properties:

textDecorationColor

Decoration color independent of text fill.

new Konva.Text({
  text: 'Selected text',
  fill: '#ffffff',
  textDecoration: 'underline',
  textDecorationColor: '#18A0FB', // blue underline, white text
});

textDecorationWidth

Override default line thickness (fontSize / 15).

text.textDecorationWidth(2); // 2px underline

textDecorationStyle

'solid' (default), 'dashed', 'dotted', 'double', or 'wavy'.

// Spell-check style red wavy underline
new Konva.Text({
  text: 'mispeled word',
  fill: '#000000',
  textDecoration: 'underline',
  textDecorationColor: '#ff0000',
  textDecorationStyle: 'wavy',
});

Use cases

  • Selection/hover highlights: blue underline while text retains its original color
  • Spell/grammar check: red wavy underline on misspelled words
  • Strikethrough pricing: colored line-through on old prices
  • Rich text editors: full decoration control matching CSS capabilities

Changes

  • Added three properties to TextConfig interface
  • Both underline and line-through rendering use the new props
  • Factory getter/setters with safe defaults (no behavior change for existing code)
  • Fully backward compatible

Addresses #2037

@rcoenen rcoenen force-pushed the feat/text-decoration-color branch from e4bb73f to e6ed797 Compare March 18, 2026 02:43
@rcoenen rcoenen changed the title Add textDecorationColor property for Text nodes Add textDecorationColor and textDecorationWidth properties for Text nodes Mar 18, 2026
… for Text

Three new properties for independent control of text decoration styling,
mirroring CSS text-decoration sub-properties:

- textDecorationColor: decoration color independent of text fill
- textDecorationWidth: override default line thickness (fontSize / 15)
- textDecorationStyle: 'solid' (default), 'dashed', 'dotted', 'double', 'wavy'

All apply to both underline and line-through decorations.
Falls back to existing behavior when unset (fully backward compatible).

Addresses konvajs#2037

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@rcoenen rcoenen force-pushed the feat/text-decoration-color branch from e6ed797 to 3a80bb8 Compare March 18, 2026 02:46
@rcoenen rcoenen changed the title Add textDecorationColor and textDecorationWidth properties for Text nodes Add textDecorationColor, textDecorationWidth, and textDecorationStyle for Text Mar 18, 2026
@lavrton
Copy link
Copy Markdown
Member

lavrton commented Mar 31, 2026

I think we should have all under the same property as in css. To have API minimal: textDecoration: 'underline overline #ff3028'. So no additional props are required.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants