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
