Text & Shapes

Adding Text

Add text overlays with full styling options.

editor.addText({
  // Required
  text: string,
  x: number,
  y: number,

  // Optional styling
  fontSize?: number,        // Default: 24
  fontFamily?: string,      // Default: 'Arial'
  color?: string,           // Default: '#000000'
  bold?: boolean,           // Default: false
  italic?: boolean,         // Default: false
  align?: 'left' | 'center' | 'right',
  rotation?: number,        // Rotation in degrees

  // Optional stroke (outline)
  stroke?: { color: string, width: number },

  // Optional shadow
  shadow?: { color: string, blur: number, offsetX: number, offsetY: number }
});

Text Examples

// Simple text
editor.addText({ text: 'Hello World', x: 100, y: 100 });

// Styled text
editor.addText({
  text: 'ArtistAPhoto',
  x: 200,
  y: 150,
  fontSize: 48,
  fontFamily: 'Georgia',
  color: '#FF0000',
  bold: true,
  italic: true
});

// Text with stroke and shadow
editor.addText({
  text: 'WATERMARK',
  x: 300,
  y: 200,
  fontSize: 36,
  color: '#FFFFFF',
  stroke: { color: '#000000', width: 2 },
  shadow: { color: 'rgba(0, 0, 0, 0.5)', blur: 4, offsetX: 2, offsetY: 2 }
});

Adding Shapes

editor.addShape({
  type: 'rectangle' | 'ellipse',
  x: number,
  y: number,
  width: number,
  height: number,
  fill?: string,            // Fill color
  rotation?: number,        // Rotation in degrees
  stroke?: { color: string, width: number }
});

Shape Examples

// Filled rectangle
editor.addShape({
  type: 'rectangle',
  x: 50, y: 50,
  width: 200, height: 100,
  fill: '#FF0000'
});

// Circle (ellipse with equal width/height)
editor.addShape({
  type: 'ellipse',
  x: 150, y: 150,
  width: 100, height: 100,
  fill: '#00FF00'
});

// Rectangle with stroke only
editor.addShape({
  type: 'rectangle',
  x: 100, y: 100,
  width: 150, height: 80,
  stroke: { color: '#0000FF', width: 3 }
});