How to display text in canvas
The magic words for printing text in canvas are "fillStyle","strokeStyle", "font","textBaseline" and lastly "fillText" and "strokeText".
|fillText(text,x,y)||Print the text with solid color within. Text color is determined by fillStyle().|
|strokeText(text,x,y)||Print the text with only color the outline of the text. Text color is set by strokeStyle().|
|strokeStyle||CSS color for text that call strokeText|
|fillStyle||CSS color for text that call fillText|
|font||CSS font style such as "bold, 10px, san-serif"|
|textBaseline||This is a little bit tricky to explain. We will need another demo. The value for this propery can be "top", "hanging", "middle", "alphabetic", "ideographic" and "bottom". Default value is "alphabetic".|
Below is a picture that I borrowed from WHATWG which is a perfect illustration for all kinds of text baselines. What you should observe is how a text is being placed in relation to those baselines.
Here I have drawn a gray line at y = 100 and I am going to place each word at y = 100 but using different "textBaseline".
Again, this is just a brief introduction on HTML5 Canvas, there are many more interesting features on HTML5 Canvas out there to be explored. Have fun!