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
.
See 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