HTMLCanvasElement.height — Eigenschaft · JavaScript-Referenz

Signatur

HTMLCanvasElement.height

Beschreibung

Die Eigenschaft height gibt die interne Höhe der Bitmap eines <canvas>-Elements als nicht-negative Ganzzahl an und spiegelt das gleichnamige HTML-Attribut wider. Fehlt das Attribut oder ist sein Wert ungültig, wird der Standardwert 150 verwendet.

Wichtig ist der Unterschied zwischen der Bitmap-Größe (canvas.width/canvas.height) und der Anzeigegröße (CSS width/height). Weichen beide voneinander ab, wird die Bitmap vom Browser gestreckt oder gestaucht, was zu unscharfen oder verzerrten Grafiken führt. Für scharfe Darstellung auf hochauflösenden Displays setzt man die Bitmap-Höhe auf CSS-Höhe × window.devicePixelRatio.

Achtung: Jedes Setzen von height (auch auf denselben Wert) setzt die Zeichenfläche zurück: Alle Pixel werden gelöscht und der gesamte Kontext-Zustand (Transformationen, fillStyle, lineWidth, Clipping-Bereiche usw.) wird auf die Standardwerte zurückgesetzt.

Rückgabewert

Typ

number

Beschreibung

Nicht-negative Ganzzahl mit der Höhe der Canvas-Bitmap in Pixeln (Standard 150). Beim Setzen werden Werte in eine Ganzzahl (unsigned long) umgewandelt; negative Werte führen zum Standardwert.

Beispiele

Höhe auslesen und setzen

const canvas = document.createElement('canvas');
console.log(canvas.height); // Standardwert

canvas.height = 400;
console.log(canvas.height);
console.log(canvas.getAttribute('height'));

150 400 "400"

Scharfe Darstellung auf HiDPI-Displays

const canvas = document.querySelector('#chart');
const ctx = canvas.getContext('2d');

const resize = () => {
  const dpr = window.devicePixelRatio || 1;
  const { width, height } = canvas.getBoundingClientRect();
  // Bitmap-Größe an die tatsächliche Pixeldichte anpassen
  canvas.width = Math.round(width * dpr);
  canvas.height = Math.round(height * dpr);
  // Kontext wurde zurückgesetzt – Skalierung neu setzen
  ctx.scale(dpr, dpr);
  ctx.fillStyle = 'steelblue';
  ctx.fillRect(10, 10, width - 20, height - 20);
};

resize();
window.addEventListener('resize', resize);

Fallstrick: Setzen der Höhe löscht den Inhalt

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 50, 50);

canvas.height = canvas.height; // gleicher Wert – trotzdem Reset!

const [r] = ctx.getImageData(10, 10, 1, 1).data;
console.log(r, ctx.fillStyle);

0 #000000

Canvas-Höhe mit ResizeObserver synchronisieren

const canvas = document.querySelector('canvas');

const observer = new ResizeObserver(([entry]) => {
  const box = entry.devicePixelContentBoxSize?.[0];
  canvas.width = box ? box.inlineSize : Math.round(entry.contentRect.width * devicePixelRatio);
  canvas.height = box ? box.blockSize : Math.round(entry.contentRect.height * devicePixelRatio);
  console.log(`Neue Bitmap: ${canvas.width}×${canvas.height}`);
});

observer.observe(canvas, { box: 'device-pixel-content-box' });

Neue Bitmap: 1200×600

// Wichtig · Fallstricke

Reset beim Setzen: Jede Zuweisung an height löscht den Canvas-Inhalt und den Kontext-Zustand – auch bei unverändertem Wert. Zum reinen Löschen besser ctx.clearRect() oder ctx.reset() verwenden.
CSS vs. Attribut: CSS-height ändert nur die Anzeige, nicht die Bitmap. Unterschiedliche Seitenverhältnisse führen zu Verzerrungen.
Größenlimits: Browser begrenzen die maximale Canvas-Fläche (je nach Browser z. B. 32.767 bzw. 16.384 Pixel pro Seite oder eine Gesamtpixelzahl). Zu große Werte führen zu leerem Canvas oder Fehlern; auf Mobilgeräten ist zudem der Speicher knapp.
OffscreenCanvas: Nach transferControlToOffscreen() löst das Setzen von height einen InvalidStateError aus; die Größe muss dann über OffscreenCanvas.height geändert werden.
Die Eigenschaft wird von allen Browsern seit Langem unterstützt; devicePixelContentBoxSize beim ResizeObserver jedoch nicht in Safari – daher Fallback einplanen.

Siehe auch

HTMLCanvasElement.width HTMLCanvasElement.mozOpaque HTMLInputElement.height HTMLEmbedElement.height HTMLIFrameElement.height