HTML Canvas - Direction Property

The HTML Canvas direction property uses CanvasRenderingContext2D interface context object can be used to change the text direction inside the Canvas element.

It can be used to specify the current text direction while adding text to the canvas.

Possible input values

The possible values taken by the property are −

S.No	Value & Description
1	ltr Text direction is from left to right.
2	rtl Text direction is from right to left
3	inherit The direction to draw the text onto the Canvas element is taken from the canvas element specifications as appropriate.

Example 1

The following example uses the default 'inherit' direction to draw the text onto the Canvas element using 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="300" height="200" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.font = "25px Verdana";
      context.fillText('direction-', 150, 50);
      context.direction = 'inherit';
      context.fillText('direction-', 150, 130);
   </script>
</body>
</html>

Output

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

Example 2

The following example draws text onto the canvas from right to left direction using the property direction of CanvasRenderingContext2D object.

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

Output

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

Example 3

The following example draws text onto the canvas from left to right direction using the property direction of CanvasRenderingContext2D object.

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

Output

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

html_canvas_text.htm