Easy Tutorial
❮ Att Colgroup Span Tag Samp ❯

HTML canvas textBaseline Property

HTML canvas Reference Manual

Example

Draw a red line at y=100, then place each word at y=100 with different textBaseline values:

JavaScript:


Browser Support

Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the textBaseline property.

Note: The textBaseline property has varying effects across different browsers, especially when using "hanging" or "ideographic".

Note: Internet Explorer 8 and earlier versions do not support the <canvas> element.


Definition and Usage

The textBaseline property sets or returns the current text baseline used when drawing text.

The following diagram illustrates the various baselines supported by the textBaseline property:

Note: The fillText() and strokeText() methods use the specified textBaseline value when positioning text on the canvas.

Default value: alphabetic
JavaScript syntax: context.textBaseline="alphabetic top hanging middle ideographic bottom";
--- ---

Property Values

Value Description
alphabetic Default. The text baseline is the normal alphabetic baseline.
top The text baseline is the top of the em square.
hanging The text baseline is the hanging baseline.
middle The text baseline is the middle of the em square.
ideographic The text baseline is the ideographic baseline.
bottom The text baseline is the bottom of the em square.
❮ Att Colgroup Span Tag Samp ❯