HTML canvas textAlignProperty
Canvas ObjectExamples
Create a red line at position 150. Position 150 is the anchor point for all text defined in the examples below. Study the effect of each textAlign property value:
JavaScript：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create a red line in position 150
ctx.strokeStyle="red";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";
// Show the different textAlign values
ctx.textAlign="start";
ctx.fillText("textAlign=start",150,60);
ctx.textAlign="end";
ctx.fillText("textAlign=end",150,80);
ctx.textAlign="left";
ctx.fillText("textAlign=left",150,100);
ctx.textAlign="center";
ctx.fillText("textAlign=center",150,120);
ctx.textAlign="right";
ctx.fillText("textAlign=right",150,140);
var ctx=c.getContext("2d");
// Create a red line in position 150
ctx.strokeStyle="red";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";
// Show the different textAlign values
ctx.textAlign="start";
ctx.fillText("textAlign=start",150,60);
ctx.textAlign="end";
ctx.fillText("textAlign=end",150,80);
ctx.textAlign="left";
ctx.fillText("textAlign=left",150,100);
ctx.textAlign="center";
ctx.fillText("textAlign=center",150,120);
ctx.textAlign="right";
ctx.fillText("textAlign=right",150,140);
Try it Yourself »
Browser Support
Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the textAlign property.
Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.
Definition and Usage
The textAlign property sets or returns the current alignment of text content, based on the anchor point.
Normally, the text willstart from the specified position, however, if you set textAlign="right" and place the text at position 150, then it willend at position 150。
Tip:Please usefillText()orstrokeText()the method to actually draw and position text on the canvas.
| Default value: | start |
|---|---|
| JavaScript syntax: | context.textAlign="center|end|left|right|start"; |
Property Values
| Value | Description |
|---|---|
| start | Default. The text starts at the specified position. |
| end | The text ends at the specified position. |
| center | The center of the text is placed at the specified position. |
| left | The text starts at the specified position. |
| right | The text ends at the specified position. |
Other extensions