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
General text alignment
This example demonstrates the three "physical" values of the textAlign
property: "left"
, "center"
, and "right"
.
HTML
<canvas id="canvas"></canvas>
JavaScript
const canvas = document.getElementById('canvas'); canvas.width = 350; const ctx = canvas.getContext('2d'); const x = canvas.width / 2; ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, canvas.height); ctx.stroke(); ctx.font = '30px serif'; ctx.textAlign = 'left'; ctx.fillText('left-aligned', x, 40); ctx.textAlign = 'center'; ctx.fillText('center-aligned', x, 85); ctx.textAlign = 'right'; ctx.fillText('right-aligned', x, 130);
Result
Direction-dependent text alignment
This example demonstrates the two direction-dependent values of the textAlign
property: "start"
and "end"
. Note that the direction
property is manually specified as "ltr"
, although this is also the default for English-language text.
HTML
<canvas id="canvas"></canvas>
JavaScript
const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.font = '30px serif'; ctx.direction = 'ltr'; ctx.textAlign = 'start'; ctx.fillText('Start-aligned', 0, 50); ctx.textAlign = 'end'; ctx.fillText('End-aligned', canvas.width, 120);
Result
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'CanvasRenderingContext2D.textAlign' in that specification. |
Living Standard |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
textAlign | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 3.5 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
See also
- The interface defining this property:
CanvasRenderingContext2D