HTML and CSS Reference
Font Baseline and Alignment
You have options to align text on HTML5 Canvas both vertically and horizontally. These
alignments affect the text in relation to Canvas itself, but only to the invisible bounding box
that would surround the text's topmost, bottommost, rightmost, and leftmost sides. This is an
important distinction because it means that these alignments affect the text in ways that might
be unfamiliar to you.
The font baseline is the vertical alignment of the font glyphs based on predefined horizontal
locations in a font's em square (the grid used to design font outlines) in relation to font des-
cenders . Basically, font glyphs like lowercase p and y that traditionally extend “below the
line” have descenders. The baseline tells the canvas where to render the font based on how
those descenders relate to other glyphs in the font face.
copy it here, but in reality, we think it's easier to understand by doing , which is one of the
main reasons we wrote the Text Arranger application.
The options for the context.textBaseline property are as follows:
The top of the text em square and the top of the highest glyph in the font face. Selecting
this baseline will push the text the farthest down (highest y position) the canvas of all the
This is a bit lower than the top baseline. It is the horizontal line from which many glyphs
appear to “hang” from near the top of their face.
The dead vertical center baseline. We will use middle to help us vertically center the text
in Text Arranger.
The bottom of vertical writing script glyphs such as Arabic, Latin, and Hebrew.