HTML5 und Canvas – ein revolutionäres Tag-Team? [Interview mit Dennis Wilson]
Kommentare

Dank des Tag-Teams HTML 5 und Canvas sind Entwickler heutzutage erstmals in der Geschichte des Webs in der Lage, grafisch animierte Inhalte auch ohne Plugins flächendeckend zu realisieren. Nach und nach könnten also immer mehr Plugins das Zeitliche segnen.

Wir haben uns mit einem Fachmann über die Themen Canvas, 3D-Grafiken und WebGL unterhalten. Dennis Wilson, seines Zeichens selbstständiger Softwareentwickler und Berater für Web, Mobile und Interactive Applications, beschäftigt sich schwerpunktmäßig mit interaktiver Computergrafik und User Interfaces. Seit 2007 entwickelt er intensiv mit JavaScript und hat bereits umfangreiche Erfahrungen mit Canvas und dazugehörigen JavaScript-Libraries gesammelt.

Auf den JavaScript Days 2013 in Berlin gibt Dennis drei Workshops, die sich mit Canvas, JavaScript und 3D-Grafik im Browser beschäftigen.

WebMagazin: Dennis, mit Canvas haben Web-Entwickler erstmals die Möglichkeit, grafisch animierte Inhalte ohne Plugins zu realisieren. Bitte gibt uns eine Einordnung: Ist Canvas so etwas wie eine Revolution für die grafische Webentwicklung?

Dennis Wilson

Dennis Wilson: In der Form, wie eine Revolution im technischen Umfeld gerne definiert wird, ist es Canvas sicherlich nicht. Technologisch betrachtet ist die Grundlage, auf der Canvas funktioniert, nicht weltbewegend. Man schreibt schon viele Jahre Farbwerte in Pixelbuffer und stellt damit Bilder da. Wie in der Frage bereits erwähnt wird, bestand auch schon bereits vorher die Möglichkeit, stark grafische Inhalte für das Web zu entwickeln. Allerdings benötigte es bisher fast immer Plugins. Sei es für beispielsweise für Unity3D oder Flash. 

Neu hingegen ist, dass die Technologie nun, fairer Weise, weder Plattformen noch Entwickler ausschließt und ohne Plugins verfügbar ist. Schon jetzt wird hier eine Vielzahl von Plattformen und Browsern unterstützt. Es handelt sich um einen freien Standard und somit fallen weder Lizenzkosten an, noch ist ein Gerangel zwischen Unternehmen zu erwarten. 

Viel mehr sollte man Canvas als den logischen Schritt im Sinne einer Evolution betrachten. Es hat sich seit Mitte der Neunziger Jahre einfach herausgestellt, dass Entwickler zusätzliche Methoden benötigen, die in den bisherigen Standards nicht enthalten waren. Das hat auch das W3C erkannt und bei der Definition neuer Web-Standards entsprechend berücksichtigt. In Anbetracht des damaligen Stands der Technik, wurde auch im selben Zug berücksichtigt, dass der Bedarf an dreidimensionaler Computergrafik im Web besteht.

WebMagazin: Canvas zeichnet Grafiken nicht selbst, sondern arbeitet als Container. Das Zeichnen übernimmt in der Regel JavaScript. Welche Optionen gibt es neben JS noch?

Dennis Wilson: Gar keine. Instanziert man ein Canvas Objekt ohne darauf Änderungen über JavaScript vorzunehmen, wird es von den meisten Browsern transparent dargestellt. Das Konzept Canvas geht direkt mit JavaScript einher.

WebMagazin: Bietet das Canvas Element Fallback-Optionen für Browser, die es nicht unterstützen?

Dennis Wilson: Canvas selbst kennt kein Fallback. Das ist als würde man von einem Image Tag erwarten, es solle Fallbacks für Browser unterstützen, die keine transparenten PNGs kennen. Man kann allerhöchstens zwischen ein Canvas Element alternativen HTML-Code platzieren. Ob man dort nun doch wieder ein Flash Plugin lädt oder freundlich darauf hinweist, einen aktuelleren Browser zu nutzen, ist jedem selbst überlassen.

Es besteht allerdings die Möglichkeit, durch diverse Bibliotheken dritter Entwickler, veraltete Browser auf einen besseren Stand zu bringen. Beispielsweise gibt es frei verfügbare Skripte, die VRML, wie es im Internet Explorer lange zu finden war, gegen eine saubere Canvas-API patchen. Sprich, man bringt dem Browser eine Canvas-konforme API bei, die unter der Haube in VRML rendert, anstatt in ein HTML5 Canvas Element.

Wie bei Fallbacks oder Workarounds üblich, sollte man die Möglichkeit weniger als maßgebliche Lösung und eher als letzte Maßnahme betrachten. Sprich, es sollte sich idealer Weise auf eine dem Standard entsprechende Implementation konzentriert werden, anstatt um jeden Preis auf ältere Technologien Rücksicht zu nehmen. Dennoch ist es gut, für die Kernanforderungen auf ein Sicherheitsnetz zurückgreifen zu können.

WebMagazin: Als Canvas Context kommt meistens 2D zum Einsatz. In Ihrem Workshop möchten Sie aber auch einen kurzen Ausflug zu WebGL machen. Warum wird WebGL nicht so häufig eingesetzt?

Dennis Wilson: Wie bei Webtechnologien üblich, dauert es eine ganze Weile, bis Standards auch verlässlich und flächendeckend eingesetzt werden können. Während Canvas 2D schon sehr weitläufig verfügbar ist, holt WebGL gerade erst stark auf. Selbst Microsoft hat sich mittlerweile zu WebGL bekannt. Sie werden es in den anstehenden Versionen des Internet Explorers unterstützen. Das hätte ich bis vor kurzem noch für sehr unwahrscheinlich gehalten. Chrome, Firefox und WebKit arbeiten schon lange an der WebGL Unterstützung und sind hier alle ziemlich weit vorne. Selbst Disney hat sich für die “Der Zauberer von Oz” Website auf WebGL eingelassen. Ich halte das für einen starken Indikator zu Gunsten der Technologie.

Ein weiterer Grund ist, dass Canvas 2D in der Tat nicht unmittelbar mit WebGL zu vergleichen ist. Nicht jede Aufgabe ist den Aufwand einer WebGL Anwendung wert. Das wäre das bekannte mit “Kanonen auf Spatzen schießen“. Es ist zwar so, dass WebGL wesentlich performanter ist als Canvas 2D (CPU vs. GPU Rendering), dennoch ist der Komplexitätsgrad in Theorie und Praxis, bei WebGL immer noch wesentlich höher. Zumal man bedenken sollte, dass Canvas2D im unmittelbaren Vergleich besser in der Handhabung zweidimensionaler Grafik abschneidet. Denkt man Beispielsweise an Bildmanipulationen oder Fotofilter, kann man dies mit direktem Zugriff auf das ImageData auf mehr Plattformen und auch mit wesentlich weniger Aufwand bewerkstelligen. Die performanteren Ergebnisse wird man hingegen erreichen, wenn man beispielsweise das Bild als Textur in WebGL lädt, und über einen fragment shader den Filter ausführen lässt. So arbeiten im übrigen auch einige Anwendungen mobiler Fotoapps, da viele mobile Endgeräte neben einer “schwachen” CPU eine recht performante GPU besitzen.

Auch direktes Zeichnen mit primitiven Formen (Linien, Rechtecke, Kreise) ist in WebGL nicht unmittelbar möglich. Es gibt allerdings mittlerweile sehr pfiffige Projekte, die es ermöglichen, auch auf WebGL wie mit einer 2D Drawing API zu arbeiten. Als Fallback wird dann Canvas 2D genutzt. Sehr clever wie ich finde!

WebMagazin: Worin besteht der Unterschied zwischen SVG (Scalable Vector Graphic) und dem Canvas Element? 

Dennis Wilson: Die Computergrafik unterscheidet im groben zwei Welten: Vektorgrafik und Pixelgrafik. Vektorgrafiken besitzen die praktische Eigenschaft, dass man sie verlustfrei skalieren kann. Pixelgrafiken hingegen punkten, wenn es um komplexe und sehr detaillierte oder bunte Grafiken geht. Vektorgrafiken sind absolut ungeeignet, wenn es beispielsweise um Fotos geht. Das ist, was man im Allgemeinen im Hinterkopf behalten sollte.

SVG ist ein XML basiertes Dateiformat, zur Beschreibung von Vektorgrafiken. Man kann es auch wie den DOM über JavaScript manipulieren. So gesehen ist SVG in der Tat näher an HTML als Canvas. Daher wird es schwierig und inperformant sein, bestimmte Darstellungen mit SVG zu implementieren. Plasmaeffekte leben beispielsweise davon, dass man jeden Pixel eines Bildes in einer anderen Farbe darstellt. Es wäre theoretisch möglich, das in SVG zu tun, aber es würde grausam langsam und sehr unsinnig sein. Canvas wiederum wäre vollkommen ungeeignet, um skalierbare Inhalte zu verwalten. Ein SVG skaliert auf ein Canvas zu projizieren wäre allerdings denkbar.

Sprich wenn es darum geht Charts, Diagramme oder andere eher flächig dargestellte Grafiken darzustellen, ist SVG denkbar. Kommt es zum Thema UI Skalierung (denken wir an Responsive Design), ist SVG denkbar. Geht es um Rastergrafiken wie Bilder oder interaktive Inhalte wie Spiele, ist in der Regel zu Canvas zu greifen. 

WebMagazin: Ein überaus interessantes Themenfeld, auf dem in den nächsten Jahren sicherlich noch spannende Entwicklungen zu beobachten sein werden. Vielen Dank für die ausführlichen Antworten Dennis!


Wer jetzt Lust bekommen hat, tiefer in Canvas einzusteigen, den möchten wir auf die Early-Bird-Preise für die JavaScript Days aufmerksam machen. Wer sich bis 30. August für eine Teilnahme entscheidet, kann 100 Euro beim Ticketpreis sparen. Was erwartet die Teilnehmer? Der Veranstalter „Entwickler Akademie“ hat an drei Tagen 18 JavaScript-Workshops zu HTML5 und JavaScript APIs, Sencha Touch, Functions und Scopes, JavaScript Project Tools, Node.js, Canvas, Webapplication Architecture, Hood.ie, Three.js, Test-Driven-Development mit JavaScript, AngularJS, JavaScript Security, Responsive Webdesign und Realworld Animation Techniques zusammengestellt – vorgetragen von 15 der besten deutschsprachigen Experten.

Aufmacherbild: html 5 illustration with orange cube. vector illustration Foto von Shutterstock / Urheberrecht: gst

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -