HTML5 Canvas, 2nd Edition

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.

Vertical alignment

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 descenders. 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.

The HTML5 Canvas API online has a neat graphic that attempts to explain baseline. We could 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:

top

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 baselines.

hanging

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 ...