<canvas>: Das 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 Nicht standardisiert Veraltet

Sagt dem Canvas, 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 die standardisierte Methode canvas.getContext('2d', { alpha: false }).

width

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

Anwendungsnotizen

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.

Schluss-Tag </canvas>

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

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

Die angezeigte Größe des Canvas kann mittels CSS geändert werden, aber wenn Sie dies tun, wird das Bild beim Rendern skaliert, um die gestylte Größe anzupassen, was dazu führen kann, dass die endgültige Grafikdarstellung verzerrt wird.

Es ist besser, die Canvas-Abmessungen festzulegen, indem Sie die width- und height-Attribute direkt auf den <canvas>-Elementen setzen, entweder direkt im HTML oder mittels 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, begrenzen 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-Cavas

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 Rendering des Canvas übernehmen kann, wodurch der Haupt-Thread Ihrer Webanwendung nicht durch Canvas-Operationen blockiert wird. Durch die Parallelisierung der Arbeit bleiben andere UI-Elemente Ihrer Webanwendung auch dann reaktionsfähig, 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 für sich genommen ist nur ein Bitmap und liefert keine Informationen über gezeichnete Objekte. Canvas-Inhalt wird von unterstützenden Technologien nicht so wie semantisches HTML erfasst. Im Allgemeinen sollten Sie Canvas auf einer barrierefreien Website oder App vermeiden. Die folgenden Leitfäden können helfen, es zugänglicher zu machen.

• Canvas-Barrierefreiheit: Anwendungsfälle
• Zugänglichkeitsprobleme des Canvas-Elements
• Best Practices für interaktive Canvas-Elemente

Beispiele

HTML

Dieser Codeausschnitt fügt Ihrem HTML-Dokument ein Canvas-Element hinzu. Ein Fallback-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 ein Zeichenkontext zu erhalten und mit dem Zeichnen auf dem 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