Canvas textAlign: Align Text Around the X Coordinate
The Canvas textAlign property controls how text is horizontally positioned around the x coordinate passed to fillText() or strokeText().
Valid values are start, end, left, right, and center. The default is start.
ctx.textAlign = 'center';
ctx.fillText('plus2net.com', 250, 100);Compare textAlign values Top ↑
How each alignment works Top ↑
| Value | Alignment point |
|---|---|
left | x is the left edge |
right | x is the right edge |
center | x is the center |
start | Start side based on text direction |
end | End side based on text direction |
start and end follow text direction Top ↑
Use start and end when the alignment should adapt to left-to-right or right-to-left text. If directionality matters, set or inherit the Canvas text direction deliberately.
Frequently asked questions Top ↑
What is the default textAlign value? Top ↑
The default is start.
Does textAlign move the Canvas coordinate system? Top ↑
No. It changes how text is positioned around the x coordinate.
What is the difference between left and start? Top ↑
left is physically left; start depends on the current text direction.
How do I center Canvas text at x=250? Top ↑
Set ctx.textAlign = "center" and draw the text using x=250.
Does textAlign affect text already drawn? Top ↑
No. It affects subsequent text drawing operations.
Related Canvas text tutorials Top ↑
fillText() | textBaseline | font | Text demo | Canvas tutorial
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
