CanvasRenderingContext2D.direction

The CanvasRenderingContext2D.direction property of the Canvas 2D API specifies the current text direction used when drawing text.

Syntax

ctx.direction = "ltr" || "rtl" || "inherit";

Options

Possible values:

ltr

The text direction is left-to-right.

rtl

The text direction is right-to-left.

inherit

The text direction is inherited from the <canvas> element or the Document as appropriate.

The default value is inherit.

Examples

Using the direction property

This is just a simple code snippet using the direction property to set a different text baseline setting.

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.font = '48px serif';
ctx.direction = 'ltr';
ctx.strokeText('Hello world', 0, 100);

Edit the code below and see your changes update live in the canvas:

Specifications

Browser compatibility

[1] This feature is deactivated by default. Use the ExperimentalCanvasFeatures feature flag to enable it.

See also

• The interface defining it, CanvasRenderingContext2D.