TextMetrics: fontBoundingBoxAscent プロパティ
Baseline
2023
Newly available
Since August 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
メモ: この機能はウェブワーカー内で利用可能です。
fontBoundingBoxAscent は TextMetrics インターフェイスの読み取り専用プロパティで、CanvasRenderingContext2D.textBaseline 属性で示される水平線から、テキストの描画に使用されるすべてのフォントの中で最も高い境界矩形の上端までの距離を CSS ピクセル単位で返します。
値
数値で、CSS ピクセル単位です。
例
以下のコードは、特定のフォントでテキストの fontBoundingBoxAscent を取得する方法を示しています。
js
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
ctx.font = "25px serif";
const text = "Foo";
const textMetrics = ctx.measureText(text); // TextMetrics オブジェクトを返す
const ascentCssPixels = textMetrics.fontBoundingBoxAscent;
25px のセリフ書体で "Foo" というテキストの CSS ピクセルでのアセントは下記の通りです。
仕様書
| Specification |
|---|
| HTML # dom-textmetrics-fontboundingboxascent-dev |