Custom styles to apply to specific HTML tags. Allows for consistent styling of custom elements without CSS overrides.
StaticdefaultDefault drop shadow settings used when enabling drop shadows on text. These values are used as the base configuration when drop shadows are enabled without specific settings.
StaticdefaultDefault text style settings used when creating new text objects. These values serve as the base configuration and can be customized globally.
Alignment for multiline text, does not affect single line text.
Indicates if lines can be wrapped within words, it needs wordWrap to be set to true.
AdvancedAdvancedList of CSS style overrides to apply to the HTML text. These styles are added after the built-in styles and can override any default styling.
AdvancedThe CSS style string that will be applied to the HTML text.
Set a drop shadow for the text.
Sets the fill style for the text. HTML text only supports color fills (string or number values). Texture fills are not supported and will trigger a warning in debug mode.
The fill color to use. Must be a string or number.
// Using hex colors
const text = new HTMLText({
text: 'Colored Text',
style: {
fill: 0xff0000 // Red color
}
});
// Using CSS color strings
text.style.fill = '#00ff00'; // Hex string (Green)
text.style.fill = 'blue'; // Named color
text.style.fill = 'rgb(255,0,0)' // RGB
text.style.fill = '#f0f'; // Short hex
// Invalid usage (will trigger warning in debug)
text.style.fill = {
type: 'pattern',
texture: Texture.from('pattern.png')
}; // Not supported, falls back to default
TextStyle#fill For full fill options in canvas text
An optional filter or array of filters to apply to the text, allowing for advanced visual effects. These filters will be applied to the text as it is created, resulting in faster rendering for static text compared to applying the filter directly to the text object (which would be applied at run time).
The font family, can be a single font name, or a list of names where the first is the preferred font.
The font size (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em')
The font style.
The font variant.
The font weight.
The space between lines.
The amount of spacing between letters, default is 0.
The line height, a number that represents the vertical space that a letter uses.
Occasionally some fonts are cropped. Adding some padding will prevent this from happening by adding padding to all sides of the text.
This will NOT affect the positioning or bounds of the text.
Sets the stroke style for the text. HTML text only supports color strokes (string or number values). Texture strokes are not supported and will trigger a warning in debug mode.
The stroke style to use. Must be a string, number, or stroke configuration object
// Using hex colors
const text = new HTMLText({
text: 'Outlined Text',
style: {
stroke: 0xff0000 // Red outline
}
});
// Using CSS color strings
text.style.stroke = '#00ff00'; // Hex string (Green)
text.style.stroke = 'blue'; // Named color
text.style.stroke = 'rgb(255,0,0)' // RGB
text.style.stroke = '#f0f'; // Short hex
// Using stroke width
text.style = {
stroke: {
color: '#ff0000',
width: 2
}
};
// Remove stroke
text.style.stroke = null;
// Invalid usage (will trigger warning in debug)
text.style.stroke = {
type: 'pattern',
texture: Texture.from('pattern.png')
}; // Not supported, falls back to default
TextStyle#stroke For full stroke options in canvas text
The baseline of the text that is rendered.
Trim transparent borders from the text texture.
PERFORMANCE WARNING:
This is a costly operation as it requires scanning pixel alpha values.
Avoid using trim: true for dynamic text, as it could significantly impact performance.
How newlines and spaces should be handled. Default is 'pre' (preserve, preserve).
| value | New lines | Spaces |
|---|---|---|
| 'normal' | Collapse | Collapse |
| 'pre' | Preserve | Preserve |
| 'pre-line' | Preserve | Collapse |
Indicates if word wrap should be used.
The width at which text will wrap, it needs wordWrap to be set to true.
AdvancedAdd a style override, this can be any CSS property
it will override any built-in style. This is the
property and the value as a string (e.g., color: red).
This will override any other internal style.
CSS style(s) to add.
Creates a new HTMLTextStyle object with the same values as this one. This creates a deep copy of all style properties, including dropShadow and tag styles.
A new HTMLTextStyle instance with the same properties
// Create original style
const originalStyle = new HTMLTextStyle({
fontSize: 24,
fill: '#ff0000',
tagStyles: {
header: { fontSize: 32, fill: '#00ff00' }
}
});
// Clone the style
const clonedStyle = originalStyle.clone();
// Modify cloned style independently
clonedStyle.fontSize = 36;
clonedStyle.fill = '#0000ff';
// Original style remains unchanged
console.log(originalStyle.fontSize); // Still 24
console.log(originalStyle.fill); // Still '#ff0000'
Properties that are cloned:
Destroys this text style.
Options parameter. A boolean will act as if all options have been set to that value
Resets all properties to the default values
AdvancedUpdates the text style and triggers a refresh of the CSS style cache. This method is called automatically when style properties are changed.
// Update after multiple changes
const text = new HTMLText({
text: 'Hello World',
style
});
style.fontSize = 32;
style.fill = '#00ff00';
style.fontFamily = 'Arial';
style.update(); // Apply all changes at once
A TextStyle object rendered by the HTMLTextSystem.