The CanvasRenderingContext2D.textAlign property of the Canvas 2D API specifies the current text alignment used when drawing text.

The alignment is relative to the x value of the fillText() method. For example, if textAlign is "center", then the text's left edge will be at x - (textWidth / 2).

Syntax

ctx.textAlign = "left" || "right" || "center" || "start" || "end";

Options

Possible values:

"left"
The text is left-aligned.
"right"
The text is right-aligned.
"center"
The text is centered.
"start"
The text is aligned at the normal start of the line (left-aligned for left-to-right locales, right-aligned for right-to-left locales).
"end"
The text is aligned at the normal end of the line (right-aligned for left-to-right locales, left-aligned for right-to-left locales).

The default value is "start".

Examples

Changing text alignment

This example uses the textAlign property to align some text to the right side of the canvas.

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.font = '48px serif';
ctx.textAlign = 'right';
ctx.strokeText('Hello world', 400, 100);

Edit the code below to see your changes update live in the canvas:

Specifications

Specification Status Comment
HTML Living Standard
The definition of 'CanvasRenderingContext2D.textAlign' in that specification.
Living Standard  

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support YesEdge Full support 12Firefox Full support 3.5IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support

See also

Document Tags and Contributors

Contributors to this page: mfluehr, fscholz, Sheppy, troeggla, nmve, erikadoyle, moscartong
Last updated by: mfluehr,