Text Effects

Enhance text objects with shadows, outlines, and decorations. All effects can be combined and are fully configurable through both the API and the Property Panel UI.

Text Shadow

Add drop shadows to text for depth and visual emphasis. Supports single or multiple shadows.

Text shadowtypescript
// Apply text shadow
engine.applyTextShadow(id, {
  color: '#000000',
  offsetX: 2,
  offsetY: 2,
  blur: 4,
});

// Multiple shadows (array)
engine.applyTextShadow(id, [
  { color: 'rgba(0,0,0,0.3)', offsetX: 2, offsetY: 2, blur: 4 },
  { color: 'rgba(59,130,246,0.5)', offsetX: -1, offsetY: -1, blur: 8 },
]);

// Remove shadow
engine.applyTextShadow(id, null);

Shadow Options

NameTypeDefaultDescription
color*string—Shadow color (hex, rgba, or named)
offsetXnumber0Horizontal shadow offset in pixels
offsetYnumber0Vertical shadow offset in pixels
blurnumber0Blur radius in pixels

Text Outline

Add a stroke outline around text characters. Useful for making text stand out against busy backgrounds.

Text outlinetypescript
// Apply text outline (stroke)
engine.applyTextOutline(id, {
  color: '#000000',
  width: 2,
});

// Colored outline
engine.applyTextOutline(id, {
  color: '#ef4444',
  width: 3,
});

// Remove outline
engine.applyTextOutline(id, null);

Outline Options

NameTypeDefaultDescription
color*string—Outline color
width*number—Outline width in pixels
💡
Outline rendering
Outlines are rendered using the canvas stroke property. Very thick outlines may overlap the text fill. For best results, keep the width between 1 and 5 pixels.

Underline & Strikethrough

Apply text decorations to add underlines, strikethroughs, or overlines.

Text decorationstypescript
// Underline
engine.applyTextDecoration(id, {
  underline: true,
  linethrough: false,
  overline: false,
});

// Strikethrough
engine.applyTextDecoration(id, {
  underline: false,
  linethrough: true,
  overline: false,
});

// Combine decorations
engine.applyTextDecoration(id, {
  underline: true,
  linethrough: true,
});

// Remove all decorations
engine.applyTextDecoration(id, {
  underline: false,
  linethrough: false,
  overline: false,
});

Decoration Options

NameTypeDefaultDescription
underlinebooleanfalseShow underline decoration
linethroughbooleanfalseShow strikethrough decoration
overlinebooleanfalseShow overline decoration

Combining Effects

All text effects can be stacked together for rich visual styling.

Combined effectstypescript
// Apply multiple effects to create a styled heading
const textId = engine.addText('SALE', {
  left: 200,
  top: 200,
  fontSize: 72,
  fontWeight: 'bold',
  fill: '#ffffff',
});

// Add shadow for depth
engine.applyTextShadow(textId, {
  color: 'rgba(0,0,0,0.5)',
  offsetX: 4,
  offsetY: 4,
  blur: 8,
});

// Add outline for contrast
engine.applyTextOutline(textId, {
  color: '#ef4444',
  width: 3,
});

UI: Property Panel

When a text object is selected, the Property Panel shows collapsible sections for each effect type:

  • Shadow section — toggle on/off, color picker, offset X/Y sliders, blur slider
  • Outline section — toggle on/off, color picker, width slider
  • Decoration section — toggle buttons for underline, strikethrough, and overline
ℹī¸
Real-time preview
All effect changes are applied in real-time as you adjust the controls. Each change is automatically added to the undo stack.

Removing Effects

Pass null to any effect method to remove it completely. This is equivalent to toggling the effect off in the UI.