Tutorials References Menu

HTML canvas textAlign Property

❮ HTML Canvas Reference

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:

YourbrowserdoesnotsupporttheHTML5canvastag.

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 Yes 9.0 Yes Yes Yes

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 »

❮ HTML Canvas Reference