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 プロパティを使用する、シンプルなコードスニペットです。

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 の変更個所をその場で確認できます:

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