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:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.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 »

Description

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

The default value is start.

Se Also:

The font Property (Set text font and size)

The fillStyle Property (Set text color/gradient)

The textBaseline Property (Set text baseline)

The fillText() Method (Draw the text)

The strokeText() Method (Draw the text)

Syntax

context.textAlign = "center|end|left|right|start"

Property Values

Values	Description	Play it
start	The text start position	Play it »
end	The text end position	Play it »
center	The text center position	Play it »
left	The text start position	Play it »
right	The text end position	Play it »

Browser Support

The <canvas> element is an HTML5 standard (2014).

textAlign is supported in all modern browsers:


Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	9-11

❮ Canvas Reference