Canvas (HTML-Element)
Das Canvas-Element (vom englischen canvas für „Leinwand“ oder „Gemälde“) ist Bestandteil der Auszeichnungssprache HTML5 und gestattet ein dynamisches Zeichnen (im Fachjagon HTML-Rendering) von Rastergrafiken.
Ursprünglich von der Firma Apple als Bestandteil des WebKit entwickelt, ist es später von der Arbeitsgruppe WHATWG standardisiert worden.
Canvas umfasst einen – in der Sprache HTML – mit Höhen- und Breiten-Angaben beschriebenen Bereich, in den gezeichnet werden kann. Zudem stehen innerhalb der Sprache JavaScript 2D-Zeichenfunktionen zur Verfügung, mit dessen Hilfe dynamisch erzeugte Zeicheninhalte innerhalb des Canvas-Bereiches gestatten werden können.
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)
- Text
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.
Die Ausgabe von 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 | 3.6 | 3.2 | 14.0 | 11.0 | 3.2 | 10.0 | 2.2 |
7.0 | 9.0 | 4.0 | 15.0 | 11.1 | 4.0 - 4.1 | 11.0 | 2.3 |
8.0 | 10.0 | 5.0 | 16.0 | 11.5 | 4.2 - 4.3 | 11.1 | 3.0 |
9.0 | 14.0 | 6.0 | 21.0 | 12.0 | 5.0 - 5.1 | 11.5 | 4.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 (englisch)
- Einführung in Canvas
- Ausführliches Canvas-Tutorial bei Mozilla.org (englisch)
- canvas.quaese.de – Dokumentation, Einleitungen mit Beispielen, weiterführende Links
- Beispiele interaktiver Grafiken (englisch)
- Kurze Canvas- Einführung (englisch)
- Programme, Spiele und andere Beispiele für das HTML5 Canvas Element (englisch)
Einzelnachweise
- ↑ Compatibility tables for support of HTML5, CSS3, SVG. Abgerufen am 28. März 2012.
- ↑ "Mozilla drags IE into the future with Canvas element plugin". Ars Technica, abgerufen am 27. Juli 2011.
- ↑ "ExplorerCanvas". Sourceforge, abgerufen am 29. November 2011.