HTML canvas textBaseline プロパティ

例

y=100 に赤い線を描画し、次に、いろいろな textBaseline の値を使用して、y=100 に各単語を配置します：

JavaScript:

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

//Draw a red line at y=100
ctx.strokeStyle="red";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();

ctx.font="20px Arial"

//Place each word at y=100 with different textBaseline values
ctx.textBaseline="top";
ctx.fillText("Top",5,100);
ctx.textBaseline="bottom";
ctx.fillText("Bottom",50,100);
ctx.textBaseline="middle";
ctx.fillText("Middle",120,100);
ctx.textBaseline="alphabetic";
ctx.fillText("Alphabetic",190,100);
ctx.textBaseline="hanging";
ctx.fillText("Hanging",290,100);

Try it Yourself ❯

ブラウザ・サポート

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

プロパティ
textBaseline	Yes	9.0	Yes	Yes	Yes

注: textBaseline プロパティは、特に "hanging" または "ideographic" を使用した場合は、ブラウザ毎に動作が異なります。

定義と用法

textBaseline プロパティは、テキストを描画するときに使用した現在のテキストのベースラインを設定または返します。

下の図は、textBaseline 属性によってサポートされるさまざまなベースラインを示しています

注: fillText() と strokeText() メソッドは、キャンバス上にテキストを配置するときに指定した textBaseline の値を使用します。

デフォルト値：	alphabetic
JavaScript 構文：	context.textBaseline="alphabetic\|top\|hanging\|middle\|ideographic\|bottom";

プロパティの値

値	説明	Play it
alphabetic	デフォルト。テキストのベースラインは、通常のアルファベットのベースライン	Play it ❯
top	テキストのベースラインは、全角正方形（em square）の上辺	Play it ❯
hanging	テキストのベースラインは、hanging ベースライン	Play it ❯
middle	テキストのベースラインは、全角正方形（em square）の中央	Play it ❯
ideographic	テキストのベースラインは、表意文字のベースライン	Play it ❯
bottom	テキストのベースラインは、バウンディングボックスの下辺/td>	Play it ❯

プロパティ値の参考資料

HTML Canvas リファレンス