Canvas (HTML-Element)

Das Canvas-Element ist Bestandteil von HTML5 und gestattet ein dynamisches Rendern von Bitmap-Grafiken.

Ursprünglich von Apple als Bestandteil des Webkit entwickelt, ist es später von der WHATWG standardisiert worden.

Canvas umfasst einen in HTML-Code mit Höhen- und Breiten-Attributen definierten Bereich, in den gezeichnet werden kann. Innerhalb von JavaScript stehen 2D-Zeichenfunktionen zur Verfügung, die dynamisch erzeugte Zeicheninhalte innerhalb des Canvas-Bereichs gestatten.

Fähigkeiten

Neben normalen Linien- und Rechteckszeichenfunktionen ermöglicht Canvas unter anderem das Zeichnen von:

Kreisbögen
Bézierkurven (quadratisch und kubisch)
Farbverläufen
Grafiken (Formate: PNG, GIF, JPEG), die skaliert, positioniert und beschnitten werden können
Transparenz (mit mehreren Abstufungen)

Objekte und Objektgruppen können verschoben, rotiert und skaliert werden.

Wie bei OpenGL und DirectX auch können Objekte in einem Stack abgelegt werden, was die gezielte Manipulation von Objektgruppen ermöglicht. Animationen sind mittels Verwendung von JavaScript-Zeitfunktionen möglich.

Vektorgrafik wird nicht unterstützt.

Unterstützung

Canvas wird nativ (also ohne Plug-Ins) von den aktuellen Versionen der Browser Internet Explorer, Firefox, Opera, Safari und Chrome unterstützt.

Alte Versionen des Internet Explorers, die heutzutage noch immer weit verbreitet sind, bieten keine Unterstützung für Canvas, da sie veröffentlicht wurden, bevor das Canvas-Element standardisiert wurde.

Hier ist eine genaue Übersicht des Canvas-Supports der beliebtesten Browser (beinhaltet die letzten 4 Veröffentlichungen):^[1]

Internet Explorer	Mozilla Firefox	Apple Safari	Google Chrome	Opera	iOS Safari	Opera Mobile	Android Browser
6.0	Ältere Version; noch unterstützt: 3.6	Ältere Version; noch unterstützt: 3.2	Ältere Version; noch unterstützt: 14.0	Ältere Version; noch unterstützt: 11.0
7.0	Ältere Version; noch unterstützt: 9.0	Ältere Version; noch unterstützt: 4.0	Ältere Version; noch unterstützt: 15.0	Ältere Version; noch unterstützt: 11.1	Ältere Version; noch unterstützt: 3.2	Ältere Version; noch unterstützt: 10.0	Ältere Version; noch unterstützt: 2.1
8.0	Ältere Version; noch unterstützt: 10.0	Ältere Version; noch unterstützt: 5.0	Ältere Version; noch unterstützt: 16.0	Ältere Version; noch unterstützt: 11.5	Ältere Version; noch unterstützt: 4.0	Ältere Version; noch unterstützt: 11.0	Ältere Version; noch unterstützt: 2.2
Ältere Version; noch unterstützt: 9.0	Ältere Version; noch unterstützt: 11.0	Ältere Version; noch unterstützt: 5.1	Ältere Version; noch unterstützt: 17.0	Ältere Version; noch unterstützt: 11.6	Ältere Version; noch unterstützt: 4.2-4.3	Ältere Version; noch unterstützt: 11.1	Ältere Version; noch unterstützt: 2.3 bzw. 3.0

Die alten Versionen des Internet Explorers können jedoch mit Plugins, welche von Mozilla und Google zur Verfügung gestellt werden, um die Canvas Funktion erweitert werden.^[2]^[3]

Weblinks

Offizielle Canvas Beschreibung (engl.)
Einführung in Canvas
Ausführliches Canvas-Tutorial bei Mozilla.org (engl.)
canvas.quaese.de – Dokumentation, Einleitungen mit Beispielen, weiterführende Links.
Beispiele interaktiver Grafiken (engl.)
Kurze Canvas- Einführung (Englisch)
Programme, Spiele und andere Beispiele für das HTML5 Canvas Element (engl.)

Einzelnachweise

↑ Compatibility tables for support of HTML5, CSS3, SVG. Abgerufen am 27. Juli 2011.
↑ "Mozilla drags IE into the future with Canvas element plugin". Ars Technica, abgerufen am 27. Juli 2011.
↑ "ExplorerCanvas". Sourceforge, abgerufen am 29. November 2011.

[1] Compatibility tables for support of HTML5, CSS3, SVG. Abgerufen am 27. Juli 2011.

[2] "Mozilla drags IE into the future with Canvas element plugin". Ars Technica, abgerufen am 27. Juli 2011.

[3] "ExplorerCanvas". Sourceforge, abgerufen am 29. November 2011.

[1]

[2]

[3]