<canvas> HTML Grafik-Canvas-Element

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 Transparenz ein Faktor sein wird. Wenn das Canvas weiß, dass es keine Transparenz gibt, 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.

Verwendungsnotizen

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 gerendert.

Schließendes </canvas> Tag

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

Größenänderung des Canvas mit CSS gegenüber HTML

Die angezeigte Größe des Canvas kann mit CSS geändert werden. Wenn Sie dies tun, wird das Bild jedoch während des Renderings skaliert, um die gestylte Größe zu erreichen, was dazu führen kann, dass das endgültige Grafikrendering verzerrt wird.

Es ist besser, die Dimensionen Ihres Canvas durch die direkte Festlegung der Attribute width und height auf den <canvas> Elementen festzulegen, entweder direkt im HTML oder mithilfe von JavaScript.

Maximale Canvas-Größe

Die genaue maximale Größe eines <canvas> Elements hängt vom Browser und der Umgebung ab. In den meisten Fällen übersteigen die maximalen Abmessungen 10.000 x 10.000 Pixel, jedoch beschränken 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.

Verwendung eines Offscreen-Canvas

Ein Canvas kann mit der OffscreenCanvas API gerendert werden, bei der 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 die 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 Dokumentation zur OffscreenCanvas API.

Barrierefreiheit

Alternativer Inhalt

Das <canvas> Element an sich ist nur eine Bitmap und liefert keine Informationen über gezeichnete Objekte. Canvas-Inhalte werden nicht wie semantisches HTML zu Barrierefreiheits-Tools exponiert. 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.

• Canvas Accessibility Use Cases
• Canvas Element Accessibility Issues
• Best Practices for Interactive Canvas Elements

Beispiele

HTML

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

<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 das Canvas zu beginnen:

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Canvas API
• Canvas-Tutorial
• OffscreenCanvas
• Canvas Spickzettel (2009)
• Canvas Spickzettel (pdf) (2015)
• Safari HTML-Canvas-Leitfaden über Apple (2013)
• CanvasRenderingContext2D 2D-Zeichenkontext für ein Canvas-Element über Apple.com
• WebGL API
• <img>
• SVG
• HTML-Video und -Audio