Easy Tutorial
❮ Met Password Select Prop Style Zindex ❯

HTML canvas textAlign Attribute

Canvas Object

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 attribute value:

JavaScript:


Browser Support

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

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


Definition and Usage

The textAlign attribute sets or returns the current alignment of 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";
--- ---

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

Canvas Object

❮ Met Password Select Prop Style Zindex ❯