textAlign property
Gets or sets the current anchor point or alignment settings for text in the current context.
![]() ![]() |
Syntax
| JavaScript | |
|---|
Property values
Type: string
-
Default. If the canvas is left-to-right, the anchor point is the left edge of the text. If the canvas is right-to-left, the anchor point is the right edge of the text.
-
If the canvas is left-to-right, the anchor point is the right edge of the text. If the canvas is right-to-left, the anchor point is the left edge of the text.
-
The anchor point is the left edge of the text.
-
The anchor point is the right edge of the text.
-
The anchor point is centered in the text.
Standards information
- HTML Canvas 2D Context, Section 11
Remarks
The exact alignment depends on whether the direction of IHTMLCanvasElement is left-to-right (ltr) or right-to-left (rtl). The textBaseline value also determines the anchor point of the text.
Examples
The following code example shows the anchor point and the effect of each alignment keyword.
<!DOCTYPE html> <html> <head> <title>TextAlign example</title> </head> <body> <h1>TextAlign example</h1> <canvas id="MyCanvas" width="600" height="500"> </canvas> <script> function draw() { var canvas = document.getElementById("MyCanvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); // Create a line at the anchor point. ctx.strokeStyle = "red"; ctx.textAlign = "center"; ctx.strokeText("Anchor point", 200, 60); ctx.moveTo(200, 60); ctx.lineTo(200, 210); ctx.stroke(); // Show the demo. ctx.strokeStyle = "blue"; ctx.font = "italic 100 24px/2 Unknown Font, sans-serif"; ctx.textAlign = "start"; ctx.strokeText("Hello Start", 200, 100); ctx.textAlign = "end"; ctx.strokeText("Hello End", 200, 120); ctx.textAlign = "left"; ctx.strokeText("Hello Left", 200, 140); ctx.textAlign = "center"; ctx.strokeText("Hello center", 200, 160); ctx.textAlign = "right"; ctx.strokeText("Hello Right", 200, 180); } } draw(); </script> </body> </html>
See also

