CanvasRenderingContext2D.measureText()

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

構文

TextMetrics ctx.measureText(text);

引数

text
測定する文字列。

戻り値

TextMetrics オブジェクト。

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

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

以下のコードを使用して TextMetrics オブジェクトを得ることができます:

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

var text = ctx.measureText("foo"); // TextMetrics オブジェクト
text.width; // 16;

仕様

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

ブラウザ実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
measureTextChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 2IE 完全対応 9Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

関連情報