We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

これは実験段階の機能です。
この機能は複数のブラウザーで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザーの将来のバージョンで変更になる可能性があることに注意してください。

Canvas 2D API の CanvasRenderingContext2D.direction プロパティは、テキストを描画するときに使用する現在の書字方向を指定します。

構文

ctx.direction = "ltr" || "rtl" || "inherit";

オプション

指定可能な値:

ltr
テキストの書字方向を left-to-right にします。
rtl
テキストの書字方向を right-to-left にします。
inherit
テキストの書字方向は <canvas> 要素または Document から適宜継承します。

デフォルト値は inherit です。

direction プロパティの使用例

さまざまな書字方向を設定するために 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);

以下のコードを編集すると、canvas の変更個所をその場で確認できます:

仕様

仕様書 策定状況 コメント
HTML Living Standard
CanvasRenderingContext2D.direction の定義
現行の標準  

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート (有) [1] 未サポート 未サポート 未サポート (有)
機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート (有) (有) 未サポート 未サポート 未サポート (有)

[1] この機能はデフォルトで無効化されています。有効化するには ExperimentalCanvasFeatures 機能フラグを使用します。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: yyss
最終更新者: yyss,