CanvasRenderingContext2D: direction プロパティ

取りうる値は下記の通りです。

"ltr"

テキストの書字方向を左書き (left-to-right) にします。

"rtl"

テキストの書字方向を右書き (right-to-left) にします。

"inherit"

テキストの書字方向を <canvas> 要素または Document から適宜継承します。既定値です。

既定値は "inherit" です。

この例では、 2 つのテキストを描画しています。最初のものは左から右へ、 2 番目は右から左へ描画します。ltr の "Hi!" は rtl では "!Hi" になることに注意してください。

HTML

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

JavaScript

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);

結果

• このメソッドを定義するインターフェイスである CanvasRenderingContext2D