例

位置 150 で赤い線を引きます。位置 150 は、下の例で定義される全テキストのアンカーポイントになります。各 textAlign プロパティ値の効果を学習してください：

JavaScript:

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

// Create a red line in position 150
ctx.strokeStyle="red";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();

ctx.font="15px Arial";

// Show the different textAlign values
ctx.textAlign="start";
ctx.fillText("textAlign=start",150,60);
ctx.textAlign="end";
ctx.fillText("textAlign=end",150,80);
ctx.textAlign="left";
ctx.fillText("textAlign=left",150,100);
ctx.textAlign="center";
ctx.fillText("textAlign=center",150,120);
ctx.textAlign="right";
ctx.fillText("textAlign=right",150,140);

Try it Yourself ❯

ブラウザ・サポート

表中の数字は、プロパティを完全にサポートした最初のブラウザ・バージョンを指定しています。

定義と用法

textAlign プロパティは、アンカーポイントに応じて、テキストコンテンツの現在の配置を設定または返します。

プロパティ
textAlign	Yes	9.0	Yes	Yes	Yes

通常、テキストの文頭が指定の position になりますが、textAlign="right" と位置 150 を設定した場合、テキストの文末が position 150 で終ることを意味します。

チップ: キャンバス上に、テキストを実際に描画し配置するには、 fillText() か strokeText() メソッドを使用します。

デフォルト値：	start
JavaScript 構文：	context.textAlign="center\|end\|left\|right\|start";

値	説明	Play it
start	デフォルト。テキストは指定した位置から開始する	Play it ❯
end	テキストは指定した位置で終了する	Play it ❯
center	テキストの中央を指定した位置に配置する	Play it ❯
left	テキストは指定した位置から開始する	Play it ❯
right	テキストは指定した位置で終了する	Play it ❯

HTML canvas textAlign プロパティ

例

ブラウザ・サポート

定義と用法

プロパティの値