MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/a3e7b5301fea

CanvasRenderingContext2D.textAlign

Canvas 2D API の CanvasRenderingContext2D.textAlign プロパティは、テキストを描画するときに用いられる現在のテキスト配置を指定します。CanvasRenderingContext2D.fillText メソッドの x の値に基づいて配置されることに注意してください。従って textAlign="center" は、テキストを x-50%*width の位置から描画します。

構文

ctx.textAlign = "left" || "right" || "center" || "start" || "end";

オプション

指定可能な値:

left
テキストを左揃えにします。
right
テキストを右揃えにします。
center
テキストを中央揃えにします。
start
テキストを行の標準な開始位置から配置します (左から右へのロケールは左揃え、右から左へのロケールは右揃え)。
end
テキストを行の標準な最終位置から配置します(左から右へのロケールは右揃え、右から左へのロケールは左揃え)。

デフォルト値は start です。

textAlign プロパティの使用例

さまざまなテキスト配置を設定するために textAlign プロパティを使用する、シンプルなコードスニペットです。

HTML

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

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.font = "48px serif";
ctx.textAlign = "left";
ctx.strokeText("Hello world", 0, 100);

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

仕様

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

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート (有) 3.5 (1.9.1) 9 (有) (有)
機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート (有) (有) 1.0 (1.9.1) (有) (有) (有)

関連情報

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

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