# あらゆるテキストの正確なピクセル幅を測定
テキストがコンテナからはみ出していませんか？レンダリング前に見出しがどれくらいのスペースを占めるか知る必要がありますか？ブラウザのCanvas APIを使用すると、DOMにレンダリングすることなく、ピクセル精度でテキスト文字列の正確な幅を測定できます。# なぜ文字数カウントだけでは不十分なのか
現代の書体は固定幅ではなくプロポーショナル（比例）です。各文字は異なる幅を持っています。「W」は「i」の3倍以上のスペースを占めることがあります。文字数だけでは、テキストが実際に占める視覚的なスペースについては何もわかりません。- Webデザイン：ボタン、ラベル、表のセルでのオーバーフローを防ぎます。
- SEO：検索エンジンはタイトルを文字数ではなくピクセル単位で切り捨てます。
- CanvasとPDF：プログラムでテキストを描画する前に正確な位置を計算します。
- ツールチップと吹き出し：内部テキストに基づいてコンテナのサイズを動的に変更します。
# Canvasによる測定の仕組み
Canvas APIのctx.measureText()メソッドは、現在アクティブなフォントを使用したCSSピクセル幅を反映するwidthプロパティを持つTextMetricsオブジェクトを返します。このツールは、測定前にフォント、サイズ、太さ、スタイルを使用してコンテキストを設定します。const ctx = document.createElement('canvas').getContext('2d');ctx.font = '700 16px Inter, system-ui, sans-serif';const width = ctx.measureText('こんにちは世界').width; // 例: 74.5