HTML Element - canvas

Beispiel

<canvas id="exampleCanvas">
Ihr Browser unterstützt das Canvas-Tag nicht, oder JavaScript ist deaktiviert
</canvas>

Definition und Verwendung

Das canvas-Element dient dazu, Grafiken dynamisch per Skript (meist JavaScript) zu zeichnen.

Das canvas-Element ist anfangs leer und kann mit CSS gestaltet werden. Die eigentliche Grafik wird erst durch ein Skript gezeichnet.

Für den Fall, dass ein Browser canvas nicht unterstützt oder JavaScript deaktiviert ist, kann innerhalb des canvas-Elements ein Text angegeben werden, der stattdessen angezeigt wird.

Attribute

Attribute erweitern Elemente um zusätzliche Eigenschaften oder Informationen und beeinflussen deren Bedeutung, Verhalten oder Darstellung. Sie bestehen in der Regel aus einem Attributnamen und einem zugehörigen Wert, wobei die zulässigen Attribute vom jeweiligen Element abhängen und teils allgemein, teils elementbezogen definiert sind.

Eine besondere Gruppe bilden die aria-*-Attribute, die zur Unterstützung der Barrierefreiheit zusätzliche Informationen für assistive Technologien bereitstellen.

Beispiel mit JavaScript

<canvas id="exampleCanvas">
Ihr Browser unterstützt das Canvas-Tag nicht, oder JavaScript ist deaktiviert
</canvas>

<script>
let canvas = document.getElementById("exampleCanvas");
let ctx = canvas.getContext("2d");
ctx.fillStyle = "#0000ff";
ctx.fillRect(120, 35, 80, 80);
</script>

Standardbrowser CSS

Webbrowser wenden auf viele Elemente vordefinierte CSS-Stile an, die eine grundlegende Struktur und Lesbarkeit sicherstellen. Umfang und Ausgestaltung dieser Standardstile können je nach Browser variieren, etwa in Bezug auf Abstände, Schriftgrößen oder die Darstellung einzelner Elemente.

canvas {
height: 150px;
width: 300px;
}

Browserunterstützung

Die Unterstützung von Elementen und Attributen ist in den gängigen modernen Browsern weitgehend einheitlich gewährleistet. Unterschiede können dennoch in Details, im Einführungszeitpunkt neuer Funktionen oder bei experimentellen Features auftreten.