HOME HTML CSS XML JAVASCRIPT ASP PHP SQL MORE...

HTML5 Tutorial

HTML5 Home
HTML5 Introduction
HTML5 New Elements
HTML5 Video
HTML5 Video/DOM
HTML5 Audio
HTML5 Drag and Drop
HTML5 Canvas
HTML5 SVG
HTML5 Canvas vs. SVG
HTML5 Geolocation
HTML5 Web Storage
HTML5 App Cache
HTML5 Web Workers
HTML5 SSE

HTML5 Forms

HTML5 Input Types
HTML5 Form Elements
HTML5 Form Attributes

HTML5 Reference

HTML5 Tags
HTML5 Attributes
HTML5 Events
HTML5 Audio/Video
HTML5 Canvas 2d
HTML Valid DTDs

HTML5 canvas textBaseline Attribute

HTML5 track Tag Reference HTML5 canvas reference

Example

Write text with different textBasline alignment:

JavaScript:

...
ctx.textBaseline="bottom";
ctx.fillText("Bottom",10,50);
ctx.textBaseline="middle";
ctx.fillText("Middle",97,50);
ctx.textBaseline="top";
ctx.fillText("Top",175,50);
...

Try it yourself »

Definition and Usage

The textBaseline attribute is used to vertically align text on the canvas.

Imagine there are lines running through the letters:

The fillText() and strokeText() methods will use these lines when positioning the text.

The different attributevalues will produce this output:

Default value:	alphabetic
JavaScript syntax:	context.textBaseline="middle";

Browser Support

The textBaseline attribute is supported in all major browsers, with some differences, especially when using the "hanging" and the "ideographic" values.

Attribute Values

Values	Description	Play it
alphabetic	Aligns the text vertically at the alphabetical line (see illustration above)	Play it »
bottom	Aligns the text vertically at the bottom line (see illustration above)	Play it »
hanging	Aligns the text vertically at the hanging-line (see illustration above)	Play it »
ideographic	Aligns the text vertically at the ideographical line (see illustration above)	Play it »
middle	Aligns the text vertically at the top line (see illustration above)	Play it »