Interface: TextStyleOptions

TextStyleOptions

Constructor options used for TextStyle instances.

const textStyle = new TextStyle({
   fontSize: 12,
   fill: 'black',
});

Properties:

Name	Type	Description
`align`	'left' \| 'center' \| 'right' \| 'justify'	Alignment for multiline text, does not affect single line text
`breakWords`	boolean	Indicates if lines can be wrapped within words, it needs `wordWrap` to be set to `true`
`dropShadow`	boolean \| Partial<TextDropShadow>	Set a drop shadow for the text
`fill`	string \| Array<string> \| number \| Array<number> \| CanvasGradient \| CanvasPattern	A canvas fillstyle that will be used on the text e.g., 'red', '#00FF00'. Can be an array to create a gradient, e.g., `['#000000','#FFFFFF']` MDN
`fontFamily`	string \| string[]	The font family, can be a single font name, or a list of names where the first is the preferred font.
`fontSize`	number \| string	The font size (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em')
`fontStyle`	'normal' \| 'italic' \| 'oblique'	The font style.
`fontVariant`	'normal' \| 'small-caps'	The font variant.
`fontWeight`	'normal' \| 'bold' \| 'bolder' \| 'lighter' \| '100' \| '200' \| '300' \| '400' \| '500' \| '600' \| '700' \| '800' \| '900'	The font weight.
`leading`	number	The height of the line, a number that represents the vertical space that a letter uses.
`letterSpacing`	number	The amount of spacing between letters, default is 0
`lineHeight`	number	The line height, a number that represents the vertical space that a letter uses
`padding`	number	Occasionally some fonts are cropped. Adding some padding will prevent this from happening by adding padding to all sides of the text.
`stroke`	StrokeInput	A canvas fillstyle that will be used on the text stroke, e.g., 'blue', '#FCFF00'
`textBaseline`	'alphabetic' \| 'top' \| 'hanging' \| 'middle' \| 'ideographic' \| 'bottom'	The baseline of the text that is rendered.
`whiteSpace`	'normal' \| 'pre' \| 'pre-line'	Determines whether newlines & spaces are collapsed or preserved "normal" (collapse, collapse), "pre" (preserve, preserve) \| "pre-line" (preserve, collapse). It needs wordWrap to be set to true.
`wordWrap`	boolean	Indicates if word wrap should be used
`wordWrapWidth`	number	The width at which text will wrap, it needs wordWrap to be set to true

See:

TextStyle

Members

align 'left' | 'center' | 'right' | 'justify'

Alignment for multiline text, does not affect single line text

breakWords boolean

Indicates if lines can be wrapped within words, it needs wordWrap to be set to true

dropShadow boolean | Partial<TextDropShadow>

Set a drop shadow for the text

fill string | Array<string> | number | Array<number> | CanvasGradient | CanvasPattern

A canvas fillstyle that will be used on the text e.g., 'red', '#00FF00'. Can be an array to create a gradient, e.g., ['#000000','#FFFFFF'] MDN

fontFamily string | string[]

The font family, can be a single font name, or a list of names where the first is the preferred font.

fontSize number | string

The font size (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em')

fontStyle 'normal' | 'italic' | 'oblique'

The font style.

fontVariant 'normal' | 'small-caps'

The font variant.

fontWeight 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'

The font weight.

leading number

The height of the line, a number that represents the vertical space that a letter uses.

letterSpacing number

The amount of spacing between letters, default is 0

lineHeight number

The line height, a number that represents the vertical space that a letter uses

padding number

Occasionally some fonts are cropped. Adding some padding will prevent this from happening by adding padding to all sides of the text.

stroke StrokeInput

A canvas fillstyle that will be used on the text stroke, e.g., 'blue', '#FCFF00'

textBaseline 'alphabetic' | 'top' | 'hanging' | 'middle' | 'ideographic' | 'bottom'

The baseline of the text that is rendered.

whiteSpace 'normal' | 'pre' | 'pre-line'

Determines whether newlines & spaces are collapsed or preserved "normal" (collapse, collapse), "pre" (preserve, preserve) | "pre-line" (preserve, collapse). It needs wordWrap to be set to true.

wordWrap boolean

Indicates if word wrap should be used

wordWrapWidth number

The width at which text will wrap, it needs wordWrap to be set to true