We just spent a lot of time describing how we will handle changes in HTML form
Canvas. We will repeat this type of code several more times while creating Text Arranger.
However, we will refrain from explaining it in depth again, instead focusing on different
ways to render and capture form data and use it with Canvas.
The HTML5 Canvas context object includes a useful method, measureText(). When
supplied with a text string, it will return some properties about that text, based on the
current context settings (font face, size, and so on) in the form of a TextMetrics object.
Right now, the TextMetrics object has only a single property: width. The width prop‐
erty of a TextMetrics object gives you the exact width in pixels of the text when rendered
on the canvas. This can be very useful when attempting to center text.
Centering text using width
For the Text Arranger application, we will use the TextMetrics object to center the text
the user has entered in the textBox form control on the canvas. First, we retrieve an
instance of TextMetrics by passing the message variable (which holds the text we are
going to display) to the measureText() method of the 2D context and storing it in a
variable named metrics:
var metrics = context.measureText(message);
Then, from the width property of metrics, we get the width value of the text in pixels
and store it in a variable named textWidth:
var textWidth = metrics.width;
Next, we calculate the center of the screen by taking the width value of the canvas and
dividing it in half (theCanvas.width/2). From that, we subtract half the width value of
the text (textWidth/2). We do this because text on the canvas is vertically aligned to the
left when it is displayed without any alignment designation (more on this a bit later).
So, to center the text, we need to move it half its own width to the left and place the
center of the text in the absolute center of the canvas. We will update this in the next
section when we allow the user to select the text’s vertical alignment:
var xPosition = (theCanvas.width/2) - (textWidth/2);
What about the height of the text?
So, what about finding the height of the text so that you can break text that is longer
than the width of the canvas into multiple lines, or center it on the screen? Well, this
poses a problem. The TextMetrics object does not contain a height property. The text
font size does not give the full picture either, because it does not take into account font
glyphs that drop below the baseline of the font. While the font size will help you estimate
84 | Chapter 3: The HTML5 Canvas Text API