CanvasRenderingContext2D.measureText()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

CanvasRenderingContext2D.measureText() メソッドは、測定したテキストの情報（例えば幅など）を持つ TextMetrics (en-US) オブジェクトを返します。

構文

js
ctx.measureText(text);

引数

text

測定する文字列。

返値

TextMetrics (en-US) オブジェクト。

例

以下の <canvas> 要素があるとします。

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

以下のコードを使用して TextMetrics (en-US) オブジェクトを得ることができます。

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

let text = ctx.measureText("Hello world");
console.log(text.width); // 56;

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報