<canvas>: Das Graphics 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 entweder 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

Gibt an, ob Transluzenz ein Faktor sein wird. Wenn das Canvas weiß, dass keine Transluzenz vorhanden ist, kann die Malleistung optimiert werden. Dies wird nur von Mozilla-basierten Browsern unterstützt; verwenden Sie stattdessen den standardisierten canvas.getContext('2d', { alpha: false }).

width

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

Verwendungshinweise

Alternative Inhalte

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

Abschließendes </canvas>-Tag

Im Gegensatz zum <img>-Element benötigt das <canvas>-Element das abschließende Tag (</canvas>).

Größenanpassung des Canvas mit CSS versus HTML

Die angezeigte Größe des Canvas kann mithilfe von CSS geändert werden, aber wenn Sie dies tun, wird das Bild während des Renderings skaliert, um in die gestylte Größe zu passen, was dazu führen kann, dass das endgültige Grafik-Rendering verzerrt wird.

Es ist besser, Ihre Canvas-Dimensionen zu spezifizieren, indem Sie die Attribute width und height direkt auf die <canvas>-Elemente setzen, 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 Abmessungen über 10.000 x 10.000 Pixel liegen, begrenzen iOS-Geräte die Canvas-Größe bemerkenswerterweise 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.

Verwenden eines Offscreen-Canvas

Ein Canvas kann mit der OffscreenCanvas-API gerendert werden, wobei das Dokument und das Canvas entkoppelt sind. Der Vorteil besteht darin, dass ein Worker-Thread die Canvas-Renderings behandeln 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. Weitere Informationen finden Sie in der OffscreenCanvas-API-Dokumentation.

Barrierefreiheit

Alternative Inhalte

Das <canvas>-Element allein ist nur eine Bitmap und bietet keine Informationen über gezeichnete Objekte. Canvas-Inhalte werden für Barrierefreiheitstools nicht als semantisches HTML offengelegt. Im Allgemeinen sollten Sie die Verwendung von Canvas auf einer barrierefreien Website oder App vermeiden. Die folgenden Leitfäden können helfen, es zugänglicher zu machen.

Beispiele

HTML

Dieser Codeausschnitt fügt Ihrem HTML-Dokument ein Canvas-Element hinzu. Ein Fallback-Text wird bereitgestellt, wenn 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ßinhalte, Formulierungselemente, eingebettete Inhalte, greifbare Inhalte.
Erlaubte Inhalte Transparent, aber ohne interaktive Inhalte Nachfahren abgesehen von <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 obligatorisch.
Erlaubte Eltern Jedes Element, das Formulierungselemente akzeptiert.
Implizierte ARIA-Rolle Keine entsprechende Rolle
Erlaubte 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