HTML canvas textAlign Property

Example

// Accessing the element
let c = document.getElementById("myCanvas");

let ctx = c.getContext("2d");

ctx.strokeStyle = "red";
ctx.moveTo(75, 25);
ctx.lineTo(75, 125);
ctx.stroke();

ctx.font = "6px monaco";

// Show the different textAlign values
ctx.textAlign = "start";
ctx.fillText("textAlign=start", 75, 25);
ctx.textAlign = "end";
ctx.fillText("textAlign=end", 75, 50);
ctx.textAlign = "left";
ctx.fillText("textAlign=left", 75, 75);
ctx.textAlign = "center";
ctx.fillText("textAlign=center", 75, 100);
ctx.textAlign = "right";
ctx.fillText("textAlign=right", 75, 125);

Try this code ❯

Meaning

The textAlign canvas property sets or returns the current alignment for text content.

Standard Syntax

Default value:

start

JavaScript syntax:

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

Property Values

Value	Description
center	Default. The text starts at the specified position.
end	The text ends at the specified position.
left	The center of the text is placed at the specified position.
right	The text starts at the specified position.
start	The text ends at the specified position.