Export (0) Print
Expand All

textAlign property

Gets or sets the current anchor point or alignment settings for text in the current context.

HTML Canvas 2D Context, Section 11Internet Explorer 9

Syntax

JavaScript

p = object.textAlign

Property values

Type: string

start

Default. If the canvas is left-to-right, the anchor point is the left edge of the text. If the canvas is right-to-left, the anchor point is the right edge of the text.

end

If the canvas is left-to-right, the anchor point is the right edge of the text. If the canvas is right-to-left, the anchor point is the left edge of the text.

left

The anchor point is the left edge of the text.

right

The anchor point is the right edge of the text.

center

The anchor point is centered in the text.

Standards information

Remarks

The exact alignment depends on whether the direction of IHTMLCanvasElement is left-to-right (ltr) or right-to-left (rtl). The textBaseline value also determines the anchor point of the text.

Examples

The following code example shows the anchor point and the effect of each alignment keyword.


<!DOCTYPE html>
<html>
<head>
    <title>TextAlign example</title>
</head>
<body>
  <h1>TextAlign example</h1>
  <canvas id="MyCanvas" width="600" height="500"> </canvas>
    <script>
      function draw() {
        var canvas = document.getElementById("MyCanvas");
        if (canvas.getContext) {
          var ctx = canvas.getContext("2d");
          // Create a line at the anchor point.
          ctx.strokeStyle = "red";
          ctx.textAlign = "center";
          ctx.strokeText("Anchor point", 200, 60);
          ctx.moveTo(200, 60);
          ctx.lineTo(200, 210);
          ctx.stroke();
          // Show the demo.
          ctx.strokeStyle = "blue";
          ctx.font = "italic 100 24px/2 Unknown Font, sans-serif";
          ctx.textAlign = "start";
          ctx.strokeText("Hello Start", 200, 100);
          ctx.textAlign = "end";
          ctx.strokeText("Hello End", 200, 120);
          ctx.textAlign = "left";
          ctx.strokeText("Hello Left", 200, 140);
          ctx.textAlign = "center";
          ctx.strokeText("Hello center", 200, 160);
          ctx.textAlign = "right";
          ctx.strokeText("Hello Right", 200, 180);
        }
      }
      draw();
  </script>
</body>
</html>


See also

CanvasRenderingContext2D

 

 

Show:
© 2014 Microsoft