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 ein positiver integer, der das width-HTML-Attribut des <canvas>-Elements widerspiegelt und in CSS-Pixeln interpretiert wird. Wenn das Attribut nicht angegeben ist oder auf einen ungültigen Wert, wie eine negative Zahl, gesetzt wird, wird der Standardwert 300 verwendet.

Das Setzen der width-Eigenschaft setzt den gesamten Rendering-Kontext auf seinen Standardzustand zurück. Dies umfasst das Löschen der Leinwand (Backing Buffer), das Zurücksetzen des aktuellen Pfades und das Zurücksetzen aller Eigenschaften wie fillStyle und globalCompositeOperation. Dieser Reset tritt bei allen Kontexttypen auf und tritt sogar ein, wenn width auf seinen aktuellen Wert gesetzt wird. Um den vorherigen Inhalt nach einer Änderungs des width 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 der Leinwand kontrollieren.

Wert

Eine Zahl.

Beispiele

Für dieses <canvas>-Element:

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

Sie können die Breite der Leinwand mit dem folgenden Code abfragen:

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

Spezifikationen

Specification
HTML
# dom-canvas-height

Browser-Kompatibilität

Siehe auch