Das <canvas>-Element gehört zu den spannendsten neuen Features von HTML5. Streng genommen sorgt es lediglich dafür, dass eine leere Zeichenfläche in eine Website eingebunden wird. Auf dieser Fläche lassen sich dann aber mithilfe von JavaScript beliebige Diagramme, Grafiken für Spiele oder Videos erstellen und sogar animieren. Damit tritt Canvas (im Zusammenspiel mit JavaScript und CSS) in Konkurrenz zu Adobe Flash, das bisher als Technologie der Wahl galt, um Filme und Animationen in Websites einzubinden. Canvas hat gegenüber Flash aber den Vorteil, dass es kein Plugin benötigt, um die animierten Grafiken anzuzeigen, und darüber hinaus lässt sich das Element problemlos auf Apples iPhone und iPad einsetzen.

Die Möglichkeiten, die das <canvas>-Element bietet, reichen von der Erstellung einfacher Linien und Rechtecke bis hin zu komplexen animierten Formen. Die erzeugten Grafiken lassen sich außerdem skalieren, positionieren und beschneiden, mit mehrstufigen Transparenzen und Farbverläufen versehen – und das alles auf Basis gängiger Webtechnologien.

Das <canvas>-Element wird von den meisten aktuellen Browsern unterstützt. Einzige Ausnahme bislang: der Internet Explorer. Damit Canvas auch vom IE erkannt und dargestellt werden kann, können Entwickler auf ExplorerCanvas zurückgreifen, eine Open Source-JavaScript-Bibliothek, die die Canvas-API im Internet Explorer nachbildet.

Passend zum Thema ist im O’Reilly Verlag soeben „Canvas – kurz & gut“ von David Flanagan erschienen. Das Buch beginnt mit einem Tutorial, das einen praxisnahen Einstieg in das Thema bietet. Daran schließt sich eine ausführliche Befehlsreferenz an. Damit ermöglicht „Canvas – kurz & gut“ erfahrenen Webprogrammierern mit JavaScript-Grundkenntnissen einen schnellen und kompakten Einstieg in die Arbeit mit dem <canvas>-Element.