CanvasRenderingContext2D: textBaseline プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

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

値

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

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

既定値は "alphabetic" です。

例

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

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

HTML

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((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);
});

結果

同じ行におけるプロパティの比較

前回の例と同様に、この例でもさまざまな textBaseline プロパティの値を示しますが、この例ではすべて同じ行に水平に並べて、それぞれの違いがわかりやすいようにしています。

HTML

html

<canvas id="canvas" width="724" height="160"></canvas>

JavaScript

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

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

ctx.beginPath();
ctx.moveTo(0, 100);
ctx.lineTo(840, 100);
ctx.moveTo(0, 55);
ctx.stroke();

baselines.forEach((baseline, index) => {
  ctx.save();
  ctx.textBaseline = baseline;
  let x = index * 120 + 10;
  ctx.fillText("Abcdefghijk", x, 100);
  ctx.restore();
  ctx.fillText(baseline, x + 5, 50);
});

結果

仕様書

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

ブラウザーの互換性

Help improve MDN

Learn how to contribute

This page was last modified on ⁨2024年3月20日⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content

CanvasRenderingContext2D: textBaseline プロパティ

値

例

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

HTML

JavaScript

結果

同じ行におけるプロパティの比較

HTML

JavaScript

結果

仕様書

ブラウザーの互換性

関連情報

Help improve MDN