<canvas>: Das Grafik-Canvas-Element

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.

Verwenden Sie das HTML <canvas> Element zusammen mit der Canvas-Scripting-API oder der WebGL API, um Grafiken und Animationen zu zeichnen.

Attribute

Die Attribute dieses Elements umfassen die globalen Attribute.

height

Die Höhe des Koordinatenraums in CSS-Pixeln. Standardwert ist 150.

moz-opaque

Lässt das Canvas wissen, ob Transluzenz berücksichtigt wird. Wenn das Canvas weiß, dass keine Transluzenz vorliegt, kann die Malleistung optimiert werden. Dies wird nur von Mozilla-basierten Browsern unterstützt; verwenden Sie stattdessen die standardisierte Methode canvas.getContext('2d', { alpha: false }).

width

Die Breite des Koordinatenraums in CSS-Pixeln. Standardwert ist 300.

Nutzungshinweise

Alternativer Inhalt

Sie sollten alternativen Inhalt innerhalb des <canvas>-Blocks bereitstellen. Dieser Inhalt wird sowohl in älteren Browsern, die Canvas nicht unterstützen, als auch in Browsern mit deaktiviertem JavaScript angezeigt.

Abschluss-Tag </canvas>

Im Gegensatz zum <img> Element erfordert das <canvas> Element das schließende Tag (</canvas>).

Größenanpassung des Canvas mit CSS im Vergleich zu HTML

Die angezeigte Größe des Canvas kann mit CSS geändert werden, aber wenn Sie dies tun, wird das Bild während der Wiedergabe skaliert, um der gestylten Größe zu entsprechen, was dazu führen kann, dass die endgültige Grafikdarstellung verzerrt wird.

Es ist besser, die Canvas-Dimensionen festzulegen, indem Sie die width und height Attribute direkt auf den <canvas> Elementen setzen, entweder direkt im HTML oder durch die Verwendung von JavaScript.

Maximale Canvas-Größe

Die genaue maximale Größe eines <canvas> Elements hängt vom Browser und der Umgebung ab. Während in den meisten Fällen die maximalen Abmessungen über 10.000 x 10.000 Pixel hinausgehen, beschränken insbesondere iOS-Geräte die Canvas-Größe auf nur 4.096 x 4.096 Pixel. Siehe Canvas-Größenbeschränkungen in verschiedenen Browsern und Geräten.

Hinweis: Wenn die maximalen Abmessungen oder der Bereich überschritten werden, wird das Canvas unbrauchbar — Zeichenbefehle funktionieren nicht.

Verwendung eines Offscreen-Canvas

Ein Canvas kann mithilfe der OffscreenCanvas API gerendert werden, bei der das Dokument und das Canvas entkoppelt sind. Der Vorteil ist, dass ein Worker-Thread das Canvas-Rendering übernehmen kann und der Haupt-Thread Ihrer Webanwendung nicht durch Canvas-Operationen blockiert wird. Durch die Parallelisierung von Aufgaben bleiben andere UI-Elemente Ihrer Webanwendung reaktionsfähig, selbst wenn Sie komplexe Grafiken auf einem Offscreen-Canvas ausführen. Für weitere Informationen siehe die OffscreenCanvas API-Dokumentation.

Barrierefreiheit

Alternativer Inhalt

Das <canvas> Element ist für sich genommen nur ein Bitmap und bietet keine Informationen über gezeichnete Objekte. Canvas-Inhalte werden Barrierefreiheitswerkzeugen nicht wie semantisches HTML zugänglich gemacht. Im Allgemeinen sollten Sie die Verwendung von Canvas in einer barrierefreien Website oder App vermeiden. Die folgenden Leitfäden können helfen, es zugänglicher zu machen.

Beispiele

HTML

Dieses Code-Snippet fügt Ihrem HTML-Dokument ein Canvas-Element hinzu. Ein Fallback-Text wird bereitgestellt, falls ein Browser das Canvas nicht lesen oder rendern kann.

html
<canvas width="120" height="120">
  An alternative text describing what your canvas displays.
</canvas>

JavaScript

Dann rufen Sie im JavaScript-Code HTMLCanvasElement.getContext() auf, um einen Zeichenkontext zu erhalten und beginnen, auf dem Canvas zu zeichnen:

js
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
// Add a rectangle at (10, 10) with size 100x100 pixels
ctx.fillRect(10, 10, 100, 100);

Ergebnis

Technische Zusammenfassung

Inhaltskategorien Flussinhalt, Satzinhalt, eingebetteter Inhalt, fühlbarer Inhalt.
Erlaubter Inhalt Transparent, jedoch ohne interaktive Inhalt Nachkommen außer <a> Elementen, <button> Elementen, <input> Elementen, deren type Attribut checkbox, radio oder button ist.
Tag-Auslassung Keine, sowohl das Start- als auch das End-Tag sind erforderlich.
Zulässige Eltern Jedes Element, das Satzinhalt akzeptiert.
Implizierte ARIA-Rolle Keine entsprechende Rolle
Zulässige ARIA-Rollen Beliebig
DOM-Schnittstelle [`HTMLCanvasElement`](/de/docs/Web/API/HTMLCanvasElement)

Spezifikationen

Specification
HTML Standard
# the-canvas-element

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch