HTML and CSS Reference
In-Depth Information
Using measureText
The HTML5 Canvas context object includes a useful method,
measureText()
. When sup-
pliedwithatextstring,itwillreturnsomepropertiesaboutthattext,basedonthecurrentcon-
text settings (font face, size, and so on) in the form of a
TextMetrics
object. Right now, the
TextMetrics
objecthasonlyasingleproperty:
width
.The
width
propertyofa
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
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
var
textWidth
=
metrics
.
width
;
Next, we calculate the center of the screen by taking the
width
value of the canvas and divid-
ing 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?
var
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 how to center a font vertically
on the screen, it does not offer much if you need to break text into two or more lines. This is
because the spacing would also need to be taken into account, which could be very tricky.
