HTML Canvas - textAlign Property

The HTML Canvas textAlign property from the interface CanvasRenderingContext2D is called by the context object to specify the current text alignment to be used to draw the text onto the Canvas element.

Possible input values

The input values accepted by the property are −

S.No	Value & Description
1	left Text will be left-aligned.
2	right Text will be right aligned.
3	center Text is centered in the canvas element.
4	start The text is started at its normal place. It is a default value taken by the property when there is no input.
5	end The text is ended at its normal place in the canvas element.

Example

The following example demonstrates the 'left' and 'right' values of HTML Canvas direction property.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="400" height="100" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.font = "25px Verdana";
      context.textAlign = "left";
      context.fillText('(left)', 200, 50);
      context.textAlign = "right";
      context.fillText('(right)', 200, 50);
   </script>
</body>
</html>

Output

The output returned by the above code on the webpage as −

Example

The following example demonstrates the 'center' value of HTML Canvas direction property.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="400" height="100" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.font = "25px Verdana";
      context.textAlign = "center";
      context.fillText('(center)', 200, 50);
   </script>
</body>
</html>

Output

The output returned by the above code on the webpage as −

Example

The following example demonstrates the 'start' and 'end' values of HTML Canvas direction property.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="400" height="100" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.font = "25px Verdana";
      context.textAlign = "end";
      context.fillText('(end)', 200, 50);
      context.textAlign = "start";
      context.fillText('(start)', 200, 50);
   </script>
</body>
</html>

Output

The output returned by the above code on the webpage as −

html_canvas_text.htm