Text Demo

Text Demo Description

This page demonstrates the XTextbox and IText components from @boardxus/canvasx-core and Fabric.js. You can add and edit text objects on the canvas. Use the "Create" button to add a new editable text box.

Text Objects Documentation

Overview

CanvasX supports rich text editing using XTextbox and IText objects. These allow users to add, edit, and style text directly on the canvas, supporting features like multi-line editing, alignment, and background color.

Key Properties

• text: string — The text content.
• width: number — The width of the text box.
• textAlign: string — Alignment of the text ('left', 'center', 'right').
• backgroundColor: string — Background color of the text box.
• editable: boolean — Whether the text is editable on the canvas.

Usage Example

const text = new XTextbox('Hello World', {
  width: 400,
  textAlign: 'center',
  backgroundColor: 'lightblue',
  editable: true,
});
canvas.add(text);

Tips & Best Practices

• Use XTextbox for multi-line and styled text.
• Use IText for inline text editing with Fabric.js features.
• Set editable to false to lock text objects.