Easy Tutorial
❮ Prop Textarea Maxlength Jsref Sqrt2 ❯

HTML canvas textBaseline Property

Canvas Object

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

Canvas Object

❮ Prop Textarea Maxlength Jsref Sqrt2 ❯