W3cubDocs

/DOM

CanvasRenderingContext2D.direction

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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 example uses the direction property to set the text direction.

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 to see your changes update live in the canvas:

Specifications

Specification	Status	Comment
HTML Living Standard The definition of 'CanvasRenderingContext2D.direction' in that specification.	Living Standard

Browser compatibilityUpdate compatibility data on GitHub

	Desktop
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	Yes Disabled Yes Disabled Disabled This feature is behind the `Experimental Web Platform Features` preference. To change preferences in Chrome, visit chrome://flags.	?	No	No	No	Yes

	Mobile
	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
Basic support	Yes	Yes	?	No	No	Yes	Yes