HTML canvas textAlign Property

Example

Create a red line in 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);

Try it Yourself »

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
textAlign	4.0	9.0	3.6	4.0	10.1

Definition and Usage

The textAlign property sets or returns the current alignment for text content, according to the anchor point.

Normally, the text will START in the position specified, however, if you set textAlign="right" and place the text in position 150, it means that the text should END in position 150.

Tip: Use the fillText() or the strokeText() method to actually draw and position the text on the canvas.

Default value:	start
JavaScript syntax:	context.textAlign = "center\|end\|left\|right\|start";

Property Values

Values	Description	Play it
start	Default. The text starts at the specified position	Play it »
end	The text ends at the specified position	Play it »
center	The center of the text is placed at the specified position	Play it »
left	The text starts at the specified position	Play it »
right	The text ends at the specified position	Play it »