Gets or sets the current anchor point or alignment settings for text in the current context.
.png){kind=icon}
.png){kind=icon} |
Syntax
| JavaScript | |
|---|
Property values
Type: String
start
-
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.
end
-
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.
left
-
The anchor point is the left edge of the text.
right
-
The anchor point is the right edge of the text.
center
-
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.
<head>
<title>TextAlign example</title>
<script type="text/javascript">
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);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="MyCanvas" width="600" height="500"> </canvas>
</body>
</html>
See also
Send comments about this topic to Microsoft
Build date: 11/28/2012
