Signatur
Beschreibung
Die Eigenschaft actualBoundingBoxAscent eines TextMetrics-Objekts gibt an, wie weit der tatsächlich gezeichnete Text über die Bezugslinie hinausragt. Welche Linie das ist, legt CanvasRenderingContext2D.textBaseline fest. Du bekommst das Objekt über ctx.measureText(text). Positive Werte bedeuten, dass der Text über die Bezugslinie hinausragt.
Anders als fontBoundingBoxAscent hängt der Wert von den konkreten Glyphen ab: Bei "ace" fällt er kleiner aus als bei "ÄBd", weil Kleinbuchstaben ohne Oberlänge weniger hoch sind. So kannst du die Höhe einer Textzeile pixelgenau berechnen, Text exakt vertikal zentrieren oder eine passende Hintergrundbox um beschrifteten Text zeichnen.
Zusammen mit actualBoundingBoxDescent ergibt sich die tatsächliche Höhe: ascent + descent. Die Breite der Box erhältst du über actualBoundingBoxLeft + actualBoundingBoxRight.
Rückgabewert
double in CSS-Pixeln: der Abstand von der Bezugslinie (textBaseline) bis zur Oberkante des Begrenzungsrahmens der gerenderten Glyphen. Ist nur lesbar.Beispiele
Ascent verschiedener Texte vergleichen
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.font = '48px sans-serif';
ctx.textBaseline = 'alphabetic';
for (const text of ['ace', 'Hallo', 'ÄÖÜ']) {
const m = ctx.measureText(text);
console.log(text, m.actualBoundingBoxAscent.toFixed(1));
}Text pixelgenau vertikal zentrieren
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.font = 'bold 40px system-ui';
ctx.textBaseline = 'alphabetic';
const text = 'Zentriert';
const m = ctx.measureText(text);
const height = m.actualBoundingBoxAscent + m.actualBoundingBoxDescent;
// Grundlinie so setzen, dass die sichtbare Box mittig liegt
const x = (canvas.width - m.width) / 2;
const y = (canvas.height - height) / 2 + m.actualBoundingBoxAscent;
ctx.fillText(text, x, y);Hintergrundbox exakt um ein Label zeichnen
const ctx = document.querySelector('canvas').getContext('2d');
ctx.font = '24px sans-serif';
const drawLabel = (text, x, y, padding = 6) => {
const m = ctx.measureText(text);
const top = y - m.actualBoundingBoxAscent - padding;
const left = x - m.actualBoundingBoxLeft - padding;
const w = m.actualBoundingBoxLeft + m.actualBoundingBoxRight + padding * 2;
const h = m.actualBoundingBoxAscent + m.actualBoundingBoxDescent + padding * 2;
ctx.fillStyle = '#ffe08a';
ctx.fillRect(left, top, w, h);
ctx.fillStyle = '#222';
ctx.fillText(text, x, y);
};
drawLabel('Messwert: 42 °C', 20, 50);// Wichtig · Fallstricke
- Reihenfolge beachten:
fontundtextBaselinemusst du vormeasureText()setzen. Spätere Änderungen wirken sich nicht auf ein bereits erzeugtesTextMetrics-Objekt aus. - Abhängig von der Bezugslinie: Bei
textBaseline = 'top'kann der Wert nahe 0 oder sogar negativ sein, weil die Bezugslinie dann schon am oberen Rand liegt. - Web-Fonts: Misst du, bevor die Schrift geladen ist, beziehen sich die Werte auf die Ersatzschrift. Warte deshalb vorher auf
document.fonts.readyoderdocument.fonts.load(). - Nicht für einheitliche Zeilenhöhen: Der Wert ändert sich je nach Text. Für gleichmäßige Zeilenabstände ist
fontBoundingBoxAscentbesser geeignet. - Leichte Unterschiede: Die Werte können je nach Browser, Betriebssystem und Kantenglättung etwas abweichen. Unterstützt wird die Eigenschaft in allen aktuellen Browsern, auch in
OffscreenCanvas. Sehr alte Versionen (Firefox vor 74, Safari vor 11.1) kennen sie nicht.