HTML-<canvas> width -Attribut
Beispiel
Ein <canvas>-Element mit einer Höhe und Breite von 200 Pixel:
<canvas id="myCanvas" width="200" height="200" style="border:1px solid">
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Das widthAttribut gibt die Breite des
<canvas>Elements in Pixel an.
Tipp: Verwenden Sie das height
Attribut, um die Höhe des
<canvas>Elements in Pixel anzugeben.
Tipp: Jedes Mal, wenn die Höhe oder Breite einer Leinwand neu eingestellt wird, wird der Inhalt der Leinwand gelöscht (siehe Beispiel unten auf der Seite).
Tipp: Erfahren Sie mehr über das
<canvas>Element in unserem
HTML-Canvas-Tutorial .
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die das Attribut vollständig unterstützt.
| Attribute | |||||
|---|---|---|---|---|---|
| width | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Syntax
<canvas width="pixels">
Attributwerte
| Value | Description |
|---|---|
| pixels | Specifies the width of the canvas, in pixels (e.g. "100"). Default value is 300 |
Mehr Beispiele
Beispiel
Löschen Sie die Leinwand, indem Sie das Breiten- oder Höhenattribut festlegen (mithilfe von JavaScript):
<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 = "#92B901";
ctx.fillRect(50, 50, 100, 100);
function clearCanvas() {
c.height = 300;
}
</script>
❮ HTML <canvas>-Tag