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