Signatur
Beschreibung
Die Eigenschaft actualBoundingBoxRight eines TextMetrics-Objekts gibt als double an, wie weit die rechte Kante des tatsächlich gerenderten Textes vom Ausrichtungspunkt entfernt ist. Welcher Punkt das ist, bestimmt CanvasRenderingContext2D.textAlign: bei "left"/"start" (LTR) ist es der linke Rand, bei "center" die Mitte, bei "right" der rechte Rand. Positive Werte bedeuten „rechts vom Ausrichtungspunkt“.
Im Gegensatz zu TextMetrics.width, das die typografische Vorschubbreite (Advance) liefert, beschreibt actualBoundingBoxRight die sichtbaren Pixel der Glyphen. Kursive Schrift, Überhänge oder abschließende Leerzeichen führen daher zu Abweichungen: Ein kursives „f“ ragt oft über width hinaus, ein nachgestelltes Leerzeichen verlängert width, aber nicht die tatsächliche Box.
Zusammen mit actualBoundingBoxLeft ergibt sich die exakte sichtbare Breite: actualBoundingBoxLeft + actualBoundingBoxRight. Das ist nützlich für pixelgenaue Hintergründe hinter Text, Kollisionsprüfungen, Hervorhebungen oder das Zentrieren von Symbolen und Icons in Schriftarten.
Rückgabewert
textAlign = "right").Beispiele
Tatsächliche Breite vs. Vorschubbreite
const ctx = document.createElement('canvas').getContext('2d');
ctx.font = 'italic 48px serif';
ctx.textAlign = 'left';
const m = ctx.measureText('Golf ');
console.log('width:', m.width.toFixed(1));
console.log('actualBoundingBoxRight:', m.actualBoundingBoxRight.toFixed(1));
console.log('sichtbare Breite:', (m.actualBoundingBoxLeft + m.actualBoundingBoxRight).toFixed(1));Pixelgenauen Hintergrund hinter Text zeichnen
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.font = 'bold 32px sans-serif';
ctx.textBaseline = 'alphabetic';
const drawHighlighted = (text, x, y, padding = 4) => {
const m = ctx.measureText(text);
const left = x - m.actualBoundingBoxLeft - padding;
const top = y - m.actualBoundingBoxAscent - padding;
const w = m.actualBoundingBoxLeft + m.actualBoundingBoxRight + padding * 2;
const h = m.actualBoundingBoxAscent + m.actualBoundingBoxDescent + padding * 2;
ctx.fillStyle = '#ffe066';
ctx.fillRect(left, top, w, h);
ctx.fillStyle = '#222';
ctx.fillText(text, x, y);
};
drawHighlighted('Angebot!', 40, 80);Einfluss von textAlign auf den Wert
const ctx = document.createElement('canvas').getContext('2d');
ctx.font = '40px sans-serif';
for (const align of ['left', 'center', 'right']) {
ctx.textAlign = align;
const m = ctx.measureText('Hallo');
console.log(align, m.actualBoundingBoxRight.toFixed(1));
}// Wichtig · Fallstricke
- Abhängig vom Kontextzustand: Der Wert wird zum Zeitpunkt von
measureText()mit dem aktuellenfont,textAlignunddirectionberechnet. Wer diese Eigenschaften danach ändert, muss neu messen. - Nicht mit
widthverwechseln:widthist die Vorschubbreite inkl. Leerzeichen und Laufweite;actualBoundingBoxRightmisst nur sichtbare Glyphen und kann größer oder kleiner sein. - Webfonts: Ist eine Schrift noch nicht geladen, wird mit der Fallback-Schrift gemessen. Vorher
await document.fonts.load('32px MeineSchrift')bzw.document.fonts.readyabwarten. - Vorzeichen: Der Wert kann negativ sein (z. B. bei
textAlign = "right"oder in RTL-Richtung mit"start"). - Kompatibilität: In Chrome/Edge 77+, Firefox 74+ und Safari 11.1+ verfügbar, auch in
OffscreenCanvasRenderingContext2D. Werte können sich zwischen Browsern und Betriebssystemen wegen unterschiedlicher Schriftrasterung leicht unterscheiden. - Schreibgeschützt – Zuweisungen werden stillschweigend ignoriert (im Strict Mode ohne Fehler, da Getter ohne Setter auf dem Prototyp).