The HTML5 Canvas Text API - HTML5 Canvas - page 89

half the width of the text that we retrieved through context.measureText() like we did
previously in Text Arranger 1.0:
var metrics = context.measureText(message);
var textWidth = metrics.width;
var xPosition = (theCanvas.width/2) - (textWidth/2);
Instead, we can simply use the center point of the canvas:
var xPosition = (theCanvas.width/2);
Remember, center is only the default alignment for the text. Because you can change
this with Text Arranger, the text can still be aligned in different ways while you are
using the application.
Figure 3-6 shows how a font set to start alignment with a middle baseline might appear
on the canvas.
Figure 3-6. Font with start alignment and middle baseline