Easy Tutorial
❮ Av Prop Readystate Att Th Rowspan ❯

HTML Canvas textAlign Property

HTML Canvas Reference Manual

Example

Create a red line at position 150. Position 150 is the anchor point for all text defined in the following examples. Study the effect of each textAlign property value:

JavaScript:


Browser Support

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

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


Definition and Usage

The textAlign property sets or returns the current alignment for text content, according to the anchor point.

Typically, text starts from the specified position. However, if you set textAlign="right" and place the text at position 150, it will end at position 150.

Tip: Use the fillText() or strokeText() methods to actually draw and position text on the canvas.

Default value: start
JavaScript syntax: context.textAlign="center end left right start";
--- ---

Property Values

Value Description
start Default. Text starts at the specified position.
end Text ends at the specified position.
center The center of the text is placed at the specified position.
left Text starts at the specified position.
right Text ends at the specified position.

❮ Av Prop Readystate Att Th Rowspan ❯