HTMLCanvasElement: width-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die HTMLCanvasElement.width-Eigenschaft ist eine positive Ganzzahl, die das width HTML-Attribut des <canvas>-Elements in CSS-Pixeln darstellt. Wenn das Attribut nicht angegeben ist oder auf einen ungültigen Wert gesetzt wird, wie z.B. eine negative Zahl, wird der Standardwert 300 verwendet.

Das Setzen der width-Eigenschaft setzt den gesamten Rendering-Kontext in seinen Standardzustand zurück. Dies umfasst das Löschen des Canvas-Rückpuffers, das Zurücksetzen des aktuellen Pfads und das Zurücksetzen aller Eigenschaften wie fillStyle und globalCompositeOperation. Dieser Reset erfolgt für alle Kontexttypen, selbst wenn width auf seinen aktuellen Wert gesetzt wird. Um den vorherigen Inhalt nach einer Änderung der Breite wiederherzustellen, verwenden Sie CanvasRenderingContext2D.getImageData() und CanvasRenderingContext2D.putImageData(). Kontext-Eigenschaften müssen separat verfolgt und wiederhergestellt werden.

Dies ist eine von zwei Eigenschaften, die andere ist HTMLCanvasElement.height, die die Größe des Canvas steuern.

Wert

Eine Zahl.

Beispiele

Gegeben dieses <canvas>-Element:

html
<canvas id="canvas" width="300" height="300"></canvas>

Sie können die Breite des Canvas mit dem folgenden Code ermitteln:

js
const canvas = document.getElementById("canvas");
console.log(canvas.width); // 300

Spezifikationen

Specification
HTML
# dom-canvas-height

Browser-Kompatibilität

Siehe auch