HTML5 - Mastering the Canvas Element (VII) - Drawing Text (Seriously)

In this post, I would like to tell you that you can "draw" text on your canvas, without jeopardizing grammar.

In other words, I just mean you can display some text on the screen using some context methods.

Text as a shape

In the canvas world, think of text as a shape. You can fill it, stroke it, set a shadow using what we learned in the previous tutorial, set gradients to it using what we learned like 3 tutorials ago etc.

As you might remember, for drawing rectangles, we have 2 methods, fillRect and strokeRect. Same way, for text, we have:

• strokeText: Draws the outline of the text without filling any solid colour in it.
• fillText: Fills the shape. You should already know to change the colours from my previous tutorials.

Both of these functions take in 3 parameters.

• text: What text to draw
• x: The x coordinate of the text.
• y: The y coordinate of the text.

To beautify the text, you use the same properties that you use to beautify other shapes, after all, texts are treated as shapes too!

Text specific properties

However, some properties like font and alignment are specific to text only. These are the properties of the context object. You can specify those properties by using:

• font: Specifies the font of the text to be drawn. This uses the exact-same syntax as CSS fonts.
• Example: context.font = "bold 20px Arial";
• Default value: "10px sans-serif"
• textAlign: The alignment of your text. This could be left, right, center. You could also use start, and end, instead of left and right.

The textAlign property could be difficult to visualize. I recommend tweaking with the property which means trying out different values of the property and observing the difference, to understand the property better.