Optional
anchorThe anchor point of the text that controls the origin point for positioning and rotation. Can be a number (same value for x/y) or a PointData object.
// Set anchor to center
const text = new Text({
text: 'Hello Pixi!',
anchor: 0.5 // Same as { x: 0.5, y: 0.5 }
});
// Set anchor to top-left
const text2 = new Text({
text: 'Hello Pixi!',
anchor: { x: 0, y: 0 } // Top-left corner
});
// Set anchor to bottom-right
const text3 = new Text({
text: 'Hello Pixi!',
anchor: { x: 1, y: 1 } // Bottom-right corner
});
Optional
resolutionThe resolution/device pixel ratio for rendering. Higher values result in sharper text at the cost of performance. Set to null for auto-resolution based on device.
Optional
roundWhether to round the x/y position to whole pixels. Enabling can prevent anti-aliasing of text edges but may cause slight position shifting.
Optional
styleThe style configuration for the text. Can be a TextStyle instance or a configuration object. Supports canvas text styles, HTML text styles, and bitmap text styles.
const text = new Text({
text: 'Styled Text',
style: {
fontSize: 24,
fill: 0xff1010, // Red color
fontFamily: 'Arial',
align: 'center', // Center alignment
stroke: { color: '#4a1850', width: 5 }, // Purple stroke
dropShadow: {
color: '#000000', // Black shadow
blur: 4, // Shadow blur
distance: 6 // Shadow distance
}
}
});
const htmlText = new HTMLText({
text: 'HTML Styled Text',
style: {
fontSize: '20px',
fill: 'blue',
fontFamily: 'Verdana',
}
});
const bitmapText = new BitmapText({
text: 'Bitmap Styled Text',
style: {
fontName: 'Arial',
fontSize: 32,
}
Optional
textThe text content to display. Use '\n' for line breaks. Accepts strings, numbers, or objects with toString() method.
Options for creating text objects in PixiJS. This interface defines the common properties used across different text rendering implementations (Canvas, HTML, and Bitmap).
Example