<canvas>: Das Grafik-Canvas-Element

Dieses Element enthält die globalen Attribute.

height

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

moz-opaque Nicht standardisiert Veraltet

Lässt das Canvas wissen, ob Transparenz eine Rolle spielt. Wenn das Canvas weiß, dass keine Transparenz 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.

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.

Im Gegensatz zum <img>-Element erfordert das <canvas>-Element das Schließen des Tags (</canvas>).

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

Es ist besser, Ihre Canvas-Abmessungen direkt über die width- und height-Attribute an den <canvas>-Elementen festzulegen, entweder direkt im HTML oder über JavaScript.

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 iOS-Geräte die Canvas-Größe auf nur 4.096 x 4.096 Pixel. Siehe Canvas-Größenlimits in verschiedenen Browsern und Geräten.

Ein Canvas kann mit 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 Hauptthread 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 Dokumentation zur OffscreenCanvas-API.

Das <canvas>-Element selbst ist nur eine Bitmap und liefert keine Informationen über gezeichnete Objekte. Canvas-Inhalte werden Barrierefreiheitstools nicht wie semantisches HTML bereitgestellt. Im Allgemeinen sollten Sie darauf verzichten, Canvas auf einer zugänglichen Website oder App zu verwenden. Die folgenden Leitfäden können Ihnen helfen, es zugänglicher zu machen.

• Canvas-Zugänglichkeitsanwendungsfälle
• Probleme der Barrierefreiheit des Canvas-Elements
• HTML Canvas-Zugänglichkeit in Firefox 13 – von Steve Faulkner
• Best Practices für interaktive Canvas-Elemente

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.

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

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);

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