CanvasRenderingContext2D.textBaseline

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

構文

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

オプション

指定可能な値は次の通りです。

"top": テキストのベースラインは em の高さの範囲 (em square) の上になります。
"hanging": テキストのベースラインは hanging ベースラインになります（チベット語などのインド系の文字で使用されます）。
"middle": テキストのベースラインは em の高さの範囲の中央になります。
"alphabetic": テキストのベースラインは標準的なアルファベットベースラインになります。既定値です。
"ideographic": テキストのベースラインは表意文字ベースラインになります。文字の主要範囲の底辺がアルファベットベースラインの下からはみ出る場合があるのに対し、このラインは主要範囲の底辺そのものを表します。(中国語、日本語、韓国語で意味を持ちます。)
"bottom": テキストのベースラインは囲みボックスの下辺になります。表意文字ベースラインとの違いは、表意文字ベースラインがディセンダー (descenders) を考慮しないことです。

既定値は "alphabetic" です。

例

様々なプロパティ値の比較

この例では、様々な textBaseline プロパティ値を例示します。

HTML

<canvas id="canvas" width="550" height="500"></canvas>

JavaScript

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const baselines = ['top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom'];
ctx.font = '36px serif';
ctx.strokeStyle = 'red';

baselines.forEach(function (baseline, index) {
  ctx.textBaseline = baseline;
  const y = 75 + index * 75;
  ctx.beginPath();
  ctx.moveTo(0, y + 0.5);
  ctx.lineTo(550, y + 0.5);
  ctx.stroke();
  ctx.fillText('Abcdefghijklmnop (' + baseline + ')', 0, y);
});

結果

仕様書

Specification
HTML Standard # dom-context-2d-textbaseline-dev

ブラウザーの互換性

BCD tables only load in the browser