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
.
font : { style : String, size : Basics.Int, family : String } -> Canvas.Settings.Setting
Specify the font size and family to use when rendering text.
style
: What is the style of the text. Similar to the font-style
property
in CSS. For example, you can use italic bold
to specify both italic and bold.size
: What is the size of the text in pixels. Similar to the font-size
property 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"
.align : TextAlign -> Canvas.Settings.Setting
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
Left
Right
Center
Start
End
baseLine : TextBaseLine -> Canvas.Settings.Setting
Specifies 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.
Top
Hanging
Middle
Alphabetic
Ideographic
Bottom
maxWidth : Basics.Float -> Canvas.Settings.Setting
Specify 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.