Text Rendering

/**
 * Creates a Text object that renders text using Canvas API
 * @param text - Initial text content (string or number)
 * @param style - Text styling configuration
 * @param canvas - Optional canvas element for rendering
 */
constructor(text?: string | number, style?: Partial<ITextStyle> | TextStyle, canvas?: HTMLCanvasElement);

import { Text, TextStyle } from "@pixi/text";

// Simple text creation
const text1 = new Text('Hello World');

// Text with inline style
const text2 = new Text('Styled Text', {
  fontSize: 24,
  fill: 0xff0000,
  fontFamily: 'Arial'
});

// Text with TextStyle object
const style = new TextStyle({ fontSize: 32, fill: 'blue' });
const text3 = new Text('Blue Text', style);

// Text with custom canvas
const canvas = document.createElement('canvas');
const text4 = new Text('Custom Canvas', style, canvas);

/**
 * The text content to display
 * Setting this property marks the text as dirty for re-rendering
 */
text: string;

const text = new Text('Initial text');

// Update text content
text.text = 'New content';

// Text is automatically re-rendered when displayed

/**
 * The text style configuration
 * Can be a TextStyle object or a partial style configuration
 */
style: TextStyle | Partial<ITextStyle>;

const text = new Text('Sample text');

// Update with style object
const newStyle = new TextStyle({
  fontSize: 28,
  fill: '#ff6600'
});
text.style = newStyle;

// Update with partial style
text.style = {
  fontSize: 32,
  fontFamily: 'Helvetica',
  fill: 0x00ff00
};

/**
 * The resolution/device pixel ratio for text rendering
 * Automatically matches renderer resolution by default
 * @default settings.RESOLUTION
 */
resolution: number;

const text = new Text('High DPI Text');

// Set custom resolution for high-DPI displays
text.resolution = 2;

// Get current resolution
console.log(text.resolution);

/**
 * Renders text to canvas and updates texture
 * @param respectDirty - Whether to skip update if text isn't dirty
 */
updateText(respectDirty: boolean): void;

const text = new Text('Manual Update');

// Force text update regardless of dirty state
text.updateText(false);

// Update only if text is dirty
text.updateText(true);

/**
 * Text width - setting this modifies the scale to achieve the target width
 */
width: number;

/**
 * Text height - setting this modifies the scale to achieve the target height  
 */
height: number;

const text = new Text('Scalable Text');

// Set specific dimensions
text.width = 300;
text.height = 100;

// Get current dimensions
console.log(`Size: ${text.width}x${text.height}`);

/**
 * Destroys the text object and cleans up resources
 * @param options - Destruction options or boolean for children
 */
destroy(options?: IDestroyOptions | boolean): void;

interface IDestroyOptions {
  children?: boolean;
  texture?: boolean;
  baseTexture?: boolean;
}

const text = new Text('Temporary text');

// Clean destroy with default options
text.destroy();

// Destroy with specific options
text.destroy({
  children: false,
  texture: true,
  baseTexture: true
});

// Destroy children only
text.destroy(true);

/**
 * Global flag for new line height behavior
 * Controls HTML-like line height rendering
 */
static nextLineHeightBehavior: boolean;

/**
 * Global flag for experimental letter spacing
 * Enables Chrome's native letter-spacing API when available
 */
static experimentalLetterSpacing: boolean;

// Enable new line height behavior globally
Text.nextLineHeightBehavior = true;

// Enable experimental letter spacing
Text.experimentalLetterSpacing = true;

/**
 * Updates transform and ensures text is current
 */
updateTransform(): void;

/**
 * Gets bounds with text update
 * @param skipUpdate - Whether to skip transform update
 * @param rect - Optional rectangle to store result
 */
getBounds(skipUpdate?: boolean, rect?: Rectangle): Rectangle;

/**
 * Gets local bounds with text update
 * @param rect - Optional rectangle to store result
 */
getLocalBounds(rect?: Rectangle): Rectangle;

const text = new Text('Bounds Test');

// Update transform
text.updateTransform();

// Get bounds
const bounds = text.getBounds();
console.log(`Bounds: ${bounds.width}x${bounds.height}`);

// Get local bounds
const localBounds = text.getLocalBounds();

/**
 * The canvas element used for text rendering
 */
canvas: HTMLCanvasElement;

/**
 * The 2D rendering context for the canvas
 */
context: CanvasRenderingContext2D;

const text = new Text('Canvas Access');

// Access canvas properties
console.log(`Canvas size: ${text.canvas.width}x${text.canvas.height}`);

// Access context for custom drawing (advanced)
const ctx = text.context;
ctx.globalAlpha = 0.5;

import { Application } from "@pixi/app";
import { Text } from "@pixi/text";

const app = new Application();
const text = new Text('PixiJS Integration');

// Add to display hierarchy
app.stage.addChild(text);

// Position like any display object
text.x = 100;
text.y = 50;

// Apply transforms
text.rotation = Math.PI / 4;
text.scale.set(1.5);