Canvas - Eine Gefahr für HTML & CSS?

Bild

Das HTML5 Canvas Attribut ist kein neuer Standard im Web, sondern wird schon lange von vielen Browsern (im Internet Explorer immerhin ab Version 9) unterstützt. Auch wir haben schon das ein oder andere Projekt mithilfe von Canvas realisiert.
Eigentlich als Experiment von Apple begonnen sind die Einsatzzwecke für Canvas heutzutage weitreichend: Interaktive Grafiken, Diagramme oder Game Engines sind nur einige der vielen Einsatzmöglichkeiten.

Wie funktionierts?

Auf der Website wird ein <canvas>-Element mittels CSS platziert. In dieses Element können ab diesem Zeitpunkt mittels JavaScript Formen und Text in das Element geschrieben werden.

var context = document.getElementById("canvas").getContext("2d");
context.font = "15px Arial";
context.fillText("Canvas Beispiel", 10, 50);

In diesem Beispiel haben wir über den 2D-Context des <canvas>-Elements einen Text an die Position x:10, y:50 geschrieben. Anders als beim Erzeugen eines Textes in HTML z.B. über das <p>-Tag ist dieser Text aber im DOM-Baum nicht sichtbar.

Was sind die Vorteile?

Canvas öffnet Entwicklern Möglichkeiten, die mit reinem CSS und HTML schwer oder teilweise sogar unmöglich wären. Der größte Vorteil von Canvas gegenüber herkömmlichem JavaScript mit DOM-Manipulation ist mit Sicherheit die Performance. Ein schönes Beispiel sind hierbei Partikel, also tausende kleine Elemente die am Bildschirm herumfliegen. In CSS/HTML sind solche Experimente nur schwer hinzubekommen, in Canvas hingegen ist dies kein Problem.

Bild

30.000 Partikel

Bild

Was ist das Problem?

Canvas ist eine moderne, bessere Implementierung des Konzepts von Adobe Flash. Canvas hat dabei natürlich einige Vorteile, u.a. ohne Plugin zu funktionieren und keine eigene Programmiersprache zu benötigen. Die Grundidee bleibt aber dieselbe: auf einen ausgesuchten Bereich einer Website werden mittels Programmiersprache interaktive Elemente gezeichnet, ohne dabei von den aktuellen Möglichkeiten von CSS/HTML eingeschränkt zu werden.
Auch Flash hatte diesen Ansatz. Gefährlich wurde Flash erst, als Entwickler damit begonnen haben, ganze Webseiten damit umzusetzen. Eine Idee, die so sicher bei der Entwicklung von Flash (zumindest in der Anfangszeit) nicht berücksichtigt wurde. Das hatte enorme Nachteile für z.B. Accessibility, weil Screenreader den Text auf Seiten nicht erfassen konnten. Ähnliches galt für Suchmaschinen.
Auch die Idee, ganze Seiten oder Apps ausschließlich mit Canvas umzusetzen, beginnt sich zunehmend im Web zu festigen. Bestes Beispiel hierfür ist Flipboard, die unter dem Blogbeitragstitel „60fps on the mobile web“ erklären, welche Vorteile es für Flipboard hat, die Seite mittels Canvas zu rendern. Natürlich hat Canvas dabei auch dieselben Nachteile wie Flash.

Wie geht es weiter?

Wird Canvas (zumindest wie Flash) kurzzeitig zur dominierenden Technologie im Web und wird jede zweite Restaurant-Website damit umgesetzt? Unwahrscheinlich.
Anders als Flash hat Canvas einen entscheidenden Nachteil: Es steht keine Firma wie Adobe dahinter, die den Sieg der Technologie erzwingen will. Flash wurde damals von Entwicklern und Designern favorisiert, weil es erstmals möglich war, Animationen und andere Effekte im Web darzustellen. Ohne den Druck den Flash damit auf die Entwicklung von CSS ausgeübt hat, hätten wir heute mit Sicherheit viele der Möglichkeiten nicht, die uns CSS3 bietet.
Ähnlich wird es sich auch mit Canvas verhalten. HTML und CSS mit Canvas nachzubauen ist mühsam und zäh und wird von Entwicklern sicher nur gemacht, wenn die Vorteile der Technologie überwiegen. Sobald HTML und CSS also ebenfalls die Möglichkeiten bieten, die momentan die Vorteile von Canvas ausmachen, wird Canvas wieder das sein, wofür es eigentlich entwickelt wurde.