Canvas : Text
How to display text in canvas
The magic words for printing text in canvas are "fillStyle","strokeStyle", "font","textBaseline" and lastly "fillText" and "strokeText".
| Context method | Description |
|---|---|
| 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".
If you are planning to roll out something in Canvas and you wish you could support users running on IE 8 or below, you can consider to use a free open source javascript library called ExplorerCanvas. Beware, work around is still a work around, there are some nonuniformity issues that might drive you mad.
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!