CanvasRenderingContext2D.direction

The CanvasRenderingContext2D.direction property of the Canvas 2D API specifies the current text direction used to draw 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. Default value.

The default value is "inherit".

Examples

Changing text direction

This example draws two pieces of text. The first one is left-to-right, and the second is right-to-left. Note that "Hi!" in ltr becomes "!Hi" in rtl.

HTML

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

JavaScript

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

ctx.font = '48px serif';
ctx.fillText('Hi!', 150, 50);
ctx.direction = 'rtl';
ctx.fillText('Hi!', 150, 130);

Result

Specifications

Browser compatibility

See also

• The interface defining this property: CanvasRenderingContext2D