<canvas>: Das Grafikelement Canvas

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.

Nutzen Sie das HTML-<canvas>-Element zusammen mit entweder 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. Standardmäßig 150.

moz-opaque

Gibt dem Canvas an, ob Transluzenz eine Rolle spielen wird. Wenn das Canvas weiß, dass keine Transluzenz vorhanden ist, kann die Malleistung optimiert werden. Dies wird nur von auf Mozilla basierenden Browsern unterstützt; verwenden Sie stattdessen die standardisierte Methode canvas.getContext('2d', { alpha: false }).

width

Die Breite des Koordinatenraums in CSS-Pixeln. Standardmäßig 300.

Nutzungshinweise

Alternativer Inhalt

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

Schließendes </canvas>-Tag

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

Dimensionierung des Canvas mit CSS versus HTML

Die angezeigte Größe des Canvas kann mit CSS verändert werden, aber wenn Sie dies tun, wird das Bild beim Rendern skaliert, um zur gestylten Größe zu passen, was dazu führen kann, dass die endgültige Grafikwiedergabe verzerrt erscheint.

Es ist besser, die Dimensionen des Canvas festzulegen, indem Sie die Attribute width und height direkt an den <canvas>-Elementen festlegen, entweder direkt im HTML oder durch 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 Dimensionen 10.000 x 10.000 Pixel übersteigen, begrenzen insbesondere iOS-Geräte die Canvas-Größe auf nur 4.096 x 4.096 Pixel. Siehe Größenlimits für Canvas in verschiedenen Browsern und Geräten.

Hinweis: Das Überschreiten der maximalen Dimensionen oder Fläche macht das Canvas unbrauchbar — Zeichenbefehle funktionieren nicht.

Verwendung eines Offscreen-Canvas

Ein Canvas kann mithilfe der OffscreenCanvas-API gerendert werden, wobei das Dokument und das Canvas entkoppelt sind. Der Vorteil besteht darin, dass ein Worker-Thread das Canvas-Rendering übernehmen kann und der Haupt-Thread Ihrer Webanwendung nicht durch Canvas-Operationen blockiert wird. Durch Parallelisierung der Arbeit 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 Dokumentation zur OffscreenCanvas-API.

Barrierefreiheit

Alternativer Inhalt

Das <canvas>-Element allein ist nur ein Bitmap und liefert keine Informationen über gezeichnete Objekte. Canvas-Inhalte werden nicht wie semantisches HTML an Barrierefreiheitswerkzeuge weitergegeben. Allgemein sollten Sie vermeiden, Canvas auf barrierefreien Websites oder Apps zu verwenden. Die folgenden Leitfäden können helfen, es barrierefreier zu gestalten.

Beispiele

HTML

Dieses Codebeispiel 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

Rufen Sie dann im JavaScript-Code HTMLCanvasElement.getContext() auf, um einen Zeichenkontext zu erhalten und mit dem Zeichnen auf dem Canvas zu beginnen:

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 Fließende Inhalte, Phraseninhalte, eingebettete Inhalte, greifbare Inhalte.
Zulässige Inhalte Transparent, jedoch keine interaktiven Inhalte Nachfahren, außer <a>-Elemente, <button>-Elemente, <input>-Elemente, deren type-Attribut auf checkbox, radio oder button gesetzt ist.
Tag-Auslassung Keine, sowohl das Start- als auch das End-Tag sind obligatorisch.
Zulässige Eltern Jedes Element, das Phraseninhalte akzeptiert.
Implizite ARIA-Rolle Keine entsprechende Rolle
Zulässige ARIA-Rollen Beliebig
DOM-Schnittstelle [`HTMLCanvasElement`](/de/docs/Web/API/HTMLCanvasElement)

Spezifikationen

Specification
HTML
# the-canvas-element

Browser-Kompatibilität

Siehe auch