Canvas, kann das was?

Mit Canvas in die Zukunft der Plug-in-freien multimedialen Websites
Kommentare

HTML5 ist das Buzzword, bei dem Webentwickler und Gestalter in den vergangenen Jahren große Augen bekommen und lange Ohren gemacht haben. Abgesehen von neuen semantischen Möglichkeiten den Code besser strukturieren zu können als es mit XHTML schon möglich war, standen der Webgemeinde nun vor allem neue multimediale Wege offen.

PHP Magazin

Der Artikel „Canvas, kann das was?“ von Dennis Wilson ist erstmalig erschienen im PHP Magazin 2.2013

Früher klöppelten die Unternehmen eigene, zumeist Plug-in-basierte, Lösungen zusammen und versuchten, sie durch rohe Marktdominanz zu Quasi-Standards zu erheben. Das zahlte sich für die Hersteller spätestens dann aus, wenn Entwickler und Unternehmen entsprechende Tools lizensieren mussten. Um grafische und interaktive Inhalte performant abzubilden, setze man hier vor allem auf Flash-basierte Technologien. Zumeist um pixelgenaue Websites, Videoplayer, Trickfilme, kleine Spiele, Rich Internet Applications oder Visualisierungen jeder Art zu erstellen. Trotz der Tatsache, dass Flash zunächst auf dem System installiert werden muss, erreichte es weltweit eine enorme Abdeckung und Akzeptanz.

Postweb 2.0

Diese Vorherrschaft begann vor einigen Jahren zu bröckeln. JavaScript wurde wesentlich performanter und HTML5 bot Entwicklern nun endlich standardisierte Lösungen, mit Videos, Audio und Echtzeitgrafiken besser umgehen zu können. Besser als je zuvor.

Eine wirklich sehenswerte und besondere Erweiterung ist . Das DOM-Element selbst erscheint zunächst funktional sehr eingeschränkt. Für modernes HTML relativ unüblich, erwarten Canvas und das Drawing API in der Tat exakte und möglichst ganzzahlige Pixelmaße. Vergleichbar mit einem Schachbrett, besitzt Canvas eine feste Breite und feste Höhe. Jedes Feld des Rasters besitzt eine bezeichnende Koordinate. An jeder Koordinate ist exakt ein Farbwert hinterlegt. Das Koordinatensystem ist, wie bei fast überall in der Computergrafik, auch hier auf dem Kopf stehend.

Nun vermittelte man als Entwickler den Gestaltern jahrelang, dass Websites flexibel seien, dass sie nicht passgenau umgesetzt werden können und man idealerweise, am besten responsive Layouts plane. Ist das jetzt alles überholt? Entwickelt man also zukünftig Webseiten nur noch in Canvas?

Nein, im Gegenteil. Der allgemeine Trend entwickelt sich auch weiterhin viel stärker in Richtung relativer und flexibler Layouts. Canvas ist eher als ein neues Werkzeug zu betrachten, mit dem es möglich wird, Anforderungen innerhalb derselben Standards umzusetzen, die sonst ein klassischer Fall für Plug-ins gewesen wären. Gerade was echte Rastergrafiken betrifft, stößt man mit den herkömmlichen Board-Mitteln des DOM schnell an gewisse Grenzen.

Anwendungsszenarien

Google hat es vorgemacht und propagierte mit Chrome OS [1], gänzlich auf Onlineanwendungen zu setzen. Doch wie würde man beispielsweise ein Bildbearbeitungsprogramm auf dem Niveau kommerzieller clientseitiger Software nachbilden? Findigen Webentwicklern fallen sicherlich direkt Lösungsansätze unter Verwendung von Backend-Technologien ein. In der Tat ist es aber absurd, für jede kleine Pixeländerung die Bilddaten über das Netz zu schicken.

Weitere klassische Anwendungsfälle für Canvas sind unter anderem auch Diagramme. Während sich Balkendiagramme auch mit herkömmlichen serverseitigen Lösungsansätzen noch denkbar realistisch umsetzen ließen, sieht es beispielsweise bei Kurvendiagrammen bereits ganz anders aus. Erst recht, wenn man eventuell vor hat, den Verlauf des Graphen live zu aktualisieren. Hier bietet sich clientseitig des Weiteren der Vorteil, interaktiv auf die Diagramme Einfluss nehmen zu können. Bisher war es üblich, Diagramme serverseitig rendern und von Browser abholen zu lassen. Hier entsteht nicht nur vermeidbare Rechenlast auf dem Server, sondern es müssten unter Umständen wesentlich mehr Informationen übertragen werden, als eine Aktualisierung benötigt.


Themen der nächsten Seiten:

  • First Steps
  • Transformationen
  • Animation
  • Optimierungen
  • Fazit
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -