HTML <canvas> width-Eigenschaft

HTML-<canvas> Tag

Definition und Verwendung

width Die Eigenschaft legt die Breite des <canvas>-Elements in Pixeln fest.

Hinweis

Verwenden Sie height-Eigenschaft Bestimmen Sie die Höhe des <canvas>-Elements in Pixeln.

Bei jeder Änderung der Höhe oder Breite des Bildschirmfensters wird der Inhalt gelöscht (siehe Beispiel am Ende der Seite).

Bitte besuchen Sie unsere HTML Canvas Anleitung Lernen Sie mehr über das <canvas>-Element.

Beispiel

Beispiel 1

Ein <canvas>-Element mit einer Höhe und Breite von je 200 Pixeln:

<canvas id="myCanvas" width="400" height="400" style="border:1px solid">

Probieren Sie es selbst aus

Beispiel 2

Durch das Setzen der width-Eigenschaft auf 400px wird das Bildschirmfenster gelöscht (JavaScript verwenden):

<canvas id="myCanvas" width="200" height="200" style="border:1px solid"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#0192B9";
ctx.fillRect(50, 50, 300, 300);
function clearCanvas() {
  c.width = 400;
}
</script>

Probieren Sie es selbst aus

Syntax

<canvas width="pixels">

Attributwert

Wert Beschreibung
pixels Gibt die Breite des Canvas an, in Pixeln gemessen (z.B. "100"). Der Standardwert ist 300.

Browserunterstützung

Die in der Tabelle angegebenen Zahlen beziehen sich auf die erste Version des Browsers, die diese Eigenschaft vollständig unterstützt.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 2.0 3.1 9.0

HTML-<canvas> Tag