YouTipProp Canvas Textalign
# HTML canvas textAlign Property
[ Canvas Object](#)
## Example
Create a red line at position 150. Position 150 is the anchor point for all text defined in the example below. Examine the effect of each textAlign property value:
YourbrowserdoesnotsupporttheHTML5canvastag.
JavaScriptοΌ
var c=document.getElementById("myCanvas");
var ctx=c.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 Β»](#)
* * *
## Browser Support
The textAlign property is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.
**Note:** Internet Explorer 8 and earlier versions do not support the element.
* * *
## Definition and Usage
The textAlign property sets or returns the current alignment of text content based on the anchor point.
Typically, text starts from the specified position. However, if you set textAlign="right" and place the text at position 150, it will **end** at **position 150**.
**Tip:** Use the [fillText()](#) or [strokeText()](#) methods to actually draw and position text on the canvas.
| Default value: | start |
| --- |
| JavaScript syntax: | _context_.textAlign="center|end|left|right|start"; |
## Property Values
| Value | Description |
| --- | --- |
| start | Default. Text starts at the specified position. |
| end | Text ends at the specified position. |
| center | The center of the text is placed at the specified position. |
| left | Text starts at the specified position. |
| right | Text ends at the specified position. |
* * *
[![Image 14: Canvas