構文

metrics = context . measureText(text)

現在のフォントにおける指定テキストの長さを持った TextMetrics オブジェクトを返します。

metrics . width

measureText() メソッドに引き渡したテキストの幅を前もって返します。

仕様

measureText() メソッドには、ひとつの引数 text を与えます。このメソッドが呼び出されると、ユーザーエージェントはすべての空白文字を U+0020 SPACE 文字に置き換えなければいけません。それから、テキスト text が入ったひとつのインライン・ボックスを入れた、無限に幅が広い仮想の CSS ライン・ボックスを形成します。この CSS ライン・ボックスは、すべてのプロパティに初期値を持ちます。ただし、コンテキストの現在のフォントにセットされているインライン要素の 'font' プロパティは、font 属性によって与えられているため、除外されます。そして、CSS ピクセルでそのインライン・ボックスの幅にセットされた width 属性を持った新規の TextMetrics オブジェクトを返さなければいけません。[CSS]

TextMetrics インタフェースは、measureText() メソッドから返されるオブジェクトのために使われます。それは一つの属性 width を持ち、measureText() メソッドによってセットされます。

fillText() と strokeText() を使ってレンダリングされた絵文字は、フォント・サイズ（em square size）と measureText()から返される幅（テキストの幅）によって与えられたボックスから、はみ出す場合があります。このバージョンの仕様では、テキストのバウンディング・ボックス領域を取得する方法が提供されていません。テキストをレンダリングもしくは削除する際に、em square height や計測されたテキストの幅によって与えられたボックスではなく、クリッピング領域がカバーする canvas 全域を注意深く置き換える必要があります。

将来的に、2D コンテキスト API には、ドキュメントのフラグメントを、canvas に直接的に CSS を使ってレンダリングする方法が提供されるかもしれません。これは、マルチライン・レイアウトを行う専用の方法よりも優先されて提供されるでしょう。

※ 原文：http://www.w3.org/TR/2010/WD-2dcontext-20100624/#dom-context-2d-measuretext

サンプル

このサンプルでは、"文字列の幅は" という文字列をフォントサイズを変えて2回描画し、それぞれの文字列幅を調べたものです。

/* 文字列を定義 */
var txt = "文字列の幅は";
/* 文字列の幅を調べる */
var tm1 = ctx.measureText(txt);
/* 文字列を描画 */
ctx.fillText(txt, 10, 30);
ctx.fillText(tm1.width, 130, 30);
/* フォントのサイズを変更 */
ctx.font = "18px 'ＭＳ Ｐゴシック'";
/* 文字列の幅を調べる */
var tm2 = ctx.measureText(txt);
/* 文字列を描画 */
ctx.fillText(txt, 10, 70);
ctx.fillText(tm2.width, 130, 70);

[measureText() メソッドの実際のサンプル]

ブラウザ対応状況