The HTML5 Canvas Text API - HTML5 Canvas - page 72

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 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 of the canvas and dividing
it in half ( theCanvas.width/2 ). From that, we subtract half the width 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 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, as it does not take into account font glyphs
that drop below the baseline of the font. While the font size will help you estimate how
to center a font vertically on the screen, it does not offer much if you need to break text
onto two or more lines. This is because the spacing would also need to be taken into
account, which could be very tricky.
For our demonstration, instead of trying to use the font size to vertically center the text
on the canvas, we will create the yPosition variable for the text by simply placing it at
one-half the height of the canvas. The default baseline for a font is middle , so this works
great for centering on the screen. We will talk more about baseline in the next section:
var yPosition = (theCanvas.height/2);
In the chat example in Chapter 11 , we will show you an example of
breaking up text onto multiple lines.