CanvasRenderingContext2D.textBaseline

Canvas 2D API の CanvasRenderingContext2D.textBaseline プロパティは、テキストを描画するときに用いられる現在のテキストのベースライン (基準線) を指定します。

構文

ctx.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom";

オプション

指定可能な値:

top
テキストベースラインは em square 一辺が 1 em の正方形  の上になります。
hanging
テキストベースラインは hanging ベースラインになります。
middle
テキストベースラインは em square の真ん中になります。
alphabetic
テキストベースラインは標準的な alphabetic ベースラインになります。
ideographic
テキストベースラインは ideographic ベースラインになります。つまり、これは文字の主要な本体が alphabetic ベースラインの下からはみ出る場合、文字の本体の下になります。
bottom
テキストベースラインは bounding box の下になります。これは ディセンダー (descenders) グリフのうちベースラインより下の部分。を考慮しない ideographic ベースラインとは異なります。

デフォルト値は alphabetic です。

textBaseline プロパティの使用例

さまざまなベースライン設定を行うために textBaseline プロパティを使用する、シンプルなコードスニペットです。

HTML

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

JavaScript

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

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

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

仕様

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

ブラウザ実装状況

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
基本サポート (有) 3.5 (1.9.1) 9 (有) (有)
機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート (有) (有) 1.0 (1.9.1) (有) (有) (有)

関連情報

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

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