W3cubDocs

/Web APIs

CanvasRenderingContext2D: direction property

The CanvasRenderingContext2D.direction property of the Canvas 2D API specifies the current text direction used to draw text.

Value

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

html

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

JavaScript

js

const canvas = document.getElementById("canvas");
const 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

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
direction 77 79 101 No 64 9 77 77 101 55 9 12.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/direction