To draw text we use the function text:
text
[ font { style = "", size = 48, family = "serif" }
, align Center
]
( 50, 50 )
"Hello world"You can apply the following styling settings to text specifically. They will do
nothing if you apply them to other renderables, like shapes.
Specifies the text alignment to use when drawing text. Beware
that the alignment is based on the x value of position passed to text. So if
textAlign is Center, then the text would be drawn at x - (width / 2).
The default value is Start. MDN docs
Type of text alignment
LeftRightCenterStartEndSpecifies the current text baseline being used when drawing text.
The default value is Alphabetic.
See MDN docs for examples and rendering of the different modes.
Type of text baseline.
TopHangingMiddleAlphabeticIdeographicBottomSpecify a maximum width. The text is scaled to fit that width.
Note: max-width must be directly applied to the text renderable, if applied to a group it will have no effect.
Specify the autoswap settings as swap by letters mode to use when rendering text.
You can also use \n to swap line manually. spaces at the beginning of sentences will be omitted.
Use \t if you want to add spaces in this state.
label"" as a label.lineWidthlineSpaceSpecify the autoswap settings as swap by words mode to use when rendering text.
You can also use \n to swap line manually. spaces at the beginning of sentences will be omitted.
Use \t if you want to add spaces in this state.
If the linewidth shouldn't be less than the width of any word.
label"" as a label.lineWidthlineSpaceYou can add \n in sentence to swap line when rendering text.
Spaces at the beginning of sentences will be omitted.
Use \t if you want to add spaces in this state.
lineWidth
Specify the font size and family to use when rendering text.
style: What is the style of the text. Similar to thefont-styleproperty in CSS. For example, you can useitalic boldto specify both italic and bold.size: What is the size of the text in pixels. Similar to thefont-sizeproperty in CSS.family: Font family name to use when drawing the text. For example, you can use"monospace","serif"or"sans-serif"to use the user configured default fonts in the browser. You can also specify other font names like"Consolas".