The CanvasRenderingContext2D.direction
property of the Canvas 2D API specifies the current text direction used to draw text.
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>
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);
Specification |
---|
HTML Standard # dom-context-2d-direction-dev |
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 |
CanvasRenderingContext2D
© 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