There is a function to put the text on the canvas - and another to set up the font:
graph.text(x, y, text)
graph.font(size, name)
graph.font(size)
The graph.text simply puts the string of text given by last argument at coordinates x, y. These coordinates
normally mark upper-left bound of the text. This means that to put the text in the upper-left corner of the canvas
you can supply coordinates 0, 0. Default size is 16 pixels. Let's try it:
graph.init()
graph.text(0, 0, 'Default sized text')
graph.font(24)
graph.text(16, 16, 'Larger text')
graph.color('green')
graph.font(32, 'Serif')
graph.text(48, 48, 'Even larger, with color and serifs')
In some cases it is convenient to align text not by its upper and left border, but in some different manner. Particularly if you create vertically-oriented page for mobile screen, you want to center text labels etc. To change alignment use the dedicated function:
graph.align(horz, vert)
graph.align(horz) -- vert could be omitted if not needed
Here horz changes horizontal alignment, e.g. left, center, right. Similarly vert changes so-called "baseline"
of the text, e.g. top, bottom, middle. Try the example below:
graph.init()
graph.font(32)
graph.text(0, 0, 'Top-Left') -- default alignment
graph.align('right')
graph.text(graph.w, 0, 'Top-Right')
graph.align(nil, 'bottom') -- don't change horizontal alignment
graph.text(graph.w, graph.h, 'Bottom-Right')
graph.align('left')
graph.text(0, graph.h, 'Bottom-Left')
graph.align('center', 'middle') -- don't confuse them!
graph.text(graph.w/2, graph.h/2, 'Center/Middle')
Now have some practice - try to print text in a loop, increasing the size every time by 1 or 2 pixels and arranging it in a ladder-like structure (of course "steps" size should match the font size), e.g.:
Happy text
Happy text
Happy text
...