HTML canvas textAlignAttributes
Examples
Create a red line at position 150. Position 150 is the anchor point for all the text defined in the example 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 will, from the specified position,start, however, if you set textAlign="right" and place the text at position 150, then it will,at position 150, end。
Tip:Please use thefillText()orstrokeText()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. Text starts at the specified position. |
| end | Text ends at the specified position. |
| center | The center of the text is placed at the specified position. |
| left | Text starts at the specified position. |
| right | Text ends at the specified position. |
HTML canvas Reference Manual Other Extensions