User Centered Web Design

Teilleistung

HTML5 Canvas - Einsatz und Abgrenzung

Christoph Bhm Wintersemester 2011 Umfang: 16876 Zeichen

Inhaltsverzeichnis

Inhaltsverzeichnis
Abbildungsverzeichnis ........................................................................... II Abkrzungsverzeichnis .......................................................................... II 1 Einleitung .......................................................................................... 1 2 HTML5 Canvas ................................................................................... 1 2.1 Grundlagen ....................................................................................1 2.2 Die Canvas 2D API ..........................................................................2 2.3 Programmierung .............................................................................3 3 Technologieabgrenzung ..................................................................... 4 3.1 Scalable Vector Graphics .................................................................4 3.2 Adobe Flash Plattform .....................................................................5 4 Fazit und Ausblick .............................................................................. 6 Literaturverzeichnis ................................................................................ 8

Verzeichnisse

II

Abbildungsverzeichnis
Abbildung 1: Abbildung 2: Abbildung 3: Das Canvas-Tag....................................................................2 Canvas JavaScript Beispiel .....................................................4 Beispiel Scalable Vector Graphics ............................................5

Abkrzungsverzeichnis
API .......... Application programming interface CSS ......... Cascading Style Sheets DOM ........ Document Object Model HTML ....... Hypertext Markup Language S. ............ Seite SVG ......... Scalable Vector Graphics W3C ........ World Wide Web Consortium WebGL ..... Web Graphics Library XML ......... Extensible Markup Language

Einleitung

Einleitung

Mit der Ankndigung Microsofts, auf HTML5 bei der neu gestalteten Oberflche des knftigen Betriebssystem Windows 8 zu setzen, wurde auch bekannt, dass der hierfr zum Einsatz kommende Internet Explorers 10 keine Plug-Ins wie Flash oder Silverlight untersttzen wird (Sinofsky 2011). Damit bekennt sich nach Apple (Jobs 2011) auch der grte Hersteller von Desktopbetriebssystemen (Net Applications 2011) ebenfalls zu HTML5. Plug-in basierte Technologien wie Flash oder Silverlight verlieren daher im Web immer mehr an Bedeutung. Microsoft begrndet den Schritt mit der hierdurch erzielbaren hheren Sicherheit, der Zuverlssigkeit sowie der besseren Ressourcennutzung (Sinofsky 2011). Anhand der nach Ansichten vieler Experten mitunter wichtigsten Neuerung des HTML5 Standards (McKinney 2011; Fulton et al. 2011, S. XV; Hawkes, S. 12), dem Canvas Element, soll im Rahmen dieser Teilleistung auf die neu geschaffenen Mglichkeiten zur interaktiven Gestaltung multimedialer Webinhalte eingegangen werden. Weitergehend soll diese Technik gegenber etablierten WebTechnologien, hier konkret SVG und Flash, abgegrenzt werden, um Vor- und Nachteile sowie Einsatzgebiete aufzuzeigen. Zum Schluss wird ein Fazit gezogen.

2
2.1

HTML5 Canvas
Grundlagen

Das W3C (2011a) definiert das Canvas Element wie folgt: The canvas element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly. Das Canvas stellt damit ein in eine HTML-Seite einbindbares Rechteck dar, auf das zum Rendern von Grafiken mit Hilfe einer Programmierschnittstelle, zumeist mit der Programmiersprache JavaScript, zugegriffen wird. Fulton et al. stellt zustzlich als entscheidendes Merkmal dieser Technik heraus, dass im Gegensatz zu vergleichbaren Technologien Operationen nach Speicherung pixelgetreu umgesetzt werden. Eine Nachbearbeitung gezeichneter Objekte auf dem Canvas, beispielsweise ber Attribute, ist damit nicht mglich (Fulton et al. 2011, S. 1). Das Canvas Element wird in ein HTML Dokument mit folgendem Code eingebunden:

HTML5 Canvas

1 2 3

<canvas id="myDrawing" width="200" height="200"> <p>Your browser doesn't support canvas.</p> </canvas>
Abbildung 1: Das Canvas-Tag Quelle: eigene Darstellung

Das Canvas-Tag hat die Attribute width und height fr die Angabe von Hhe und Breite der Zeichenoberflche. Innerhalb der Canvas-Tags kann, sofern der jeweils vom Benutzer eingesetzte Browser HTML5 nicht untersttzt, ein Fallback definiert werden. Dieser wird dann anstelle der graphischen Darstellung dem Anwender prsentiert (W3C 2011a). Bereits heute untersttzen jedoch nahezu alle gngigen Browser dieses Tag (Deveria 2011, S. 1). Die Funktionalitt und Mchtigkeit von Canvas ergibt sich aus dem Zusammenspiel mit JavaScript. Fr den Zugriff auf das Canvas-Tag stellt das W3C eine Schnittstellenbeschreibung bereit, welche unter dem Titel HTML Canvas 2D Context gefhrt wird. (W3C 2011b, S.1 ff). Dieses sieht eine zweidimensionale Zeichenoberflche vor, auf der je nach Anwendungsfall Bilder, Linien, Pfade, Transformationen und weitergehende geometrische Operationen ausgefhrt werden knnen (W3C 2011b, S.1 ff sowie Kapitel 2.2). Zustzlich geht der Standard aber explizit davon aus, dass die Nutzung des Canvas ebenfalls auch in andersartigen Kontexten mglich ist. Bereits heute existiert WebGL, eine auerhalb des W3Cs entwickelte Spezifikation zur Darstellung dreidimensionaler Inhalte unter Nutzung des Canvas-Tags (Khronos Group 2011). Im Zusammenspiel mit den generell in JavaScript verfgbaren Paradigmen wie Events, Objekte sowie Klassen knnen mit Canvas entsprechend umfassende Anwendungsflle abgedeckt werden (Fulton et al. 2011, S. XV).

2.2

Die Canvas 2D API

Wie bereits in Kapitel 2.1 dargestellt, definiert der W3C-Standard neben dem Canvas-Tag an sich eine umfangreiche API zur Generierung zweidimensionaler Inhalte (W3C2011b), die in diesem Kapitel nher betrachtet werden sollen. Folgende grundlegenden Operationen lassen sich gem Seidel et al. mit Hilfe der Canvas 2D API ausfhren (Seidelin 2009, S.1f): Text: Mit dem HTML5 Canvas knnen von einfachem Text bis hin zu komplexen und nicht mit CSS realisierbare Texteffekte umgesetzt werden. Image Drawing: Unter Nutzung der Canvas-API knnen Bilddaten geladen und direkt auf das Canvas bertragen werden. Fr die Weiterbearbeitung der

HTML5 Canvas

Bildinhalte stehen Methoden, beispielsweise fr das Ausschneiden oder das Zusammenfhren von Bildbestandteilen bereit. Rectangle: Ermglicht die Erstellung von einfachen Rechtecken auf dem Canvas Objekt. Path: Ermglicht ausgehend von einem festgelegten Startpunkt die Erstellung beliebiger geometrischer Objekte. Hierzu werden einzeln gezeichnete Punkte ber Quadratische- oder Bezierkurven zu einer Flche verbunden. Pixel Manipulation: Ermglicht die pixelgetreue Manipulation beziehungsweise das Auslesen des Bildinhaltes auf Pixelebene. Transformation: Ermglicht Elemente auf dem Canvas zu transformieren, das heit zu vergrern, zu verkleinern und zu rotieren. Compositing: Compositing beschreibt die Art und Weise, wie berschneidende Elemente auf dem Canvas angeordnet und dargestellt werden. Wie anhand obiger Auflistung festgestellt werden kann, untersttzt die Canvas API nur grundlegende Bildbearbeitungsoperationen, was als ein zentraler Nachteil dieser ausgelegt wird (Fulton et al. 2011, S. 380). Umfangreiche Animationen und Transitions mssen aufwndig entwickelt werden. Entwicklungsumgebungen und umfangreiche Libraries, die diesen Prozess automatisieren knnen, sind jedoch in der Entwicklung (Winokur 2011 sowie McKinney 2009).

2.3

Programmierung

Zur Verdeutlichung der bereits in Kapitel 2.2 dargestellten Canvas-API wird an einem Beispiel die Implementierung dargestellt. In Abbildung 2 werden auf dem Canvas ein Quadrat, ein transparenter Kreis sowie ein Dreieck gezeichnet.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <head> <script> window.onload = function() { // Schritt 1: Ermittlung des 2D-Kontext var context = document.getElementById("canvas").getContext("2d"); // Schritt 2: Erstellung des Rechtecks context.fillStyle = "rgba(0, 0, 200, 0.5)"; context.fillRect(50, 10, 100, 100); // Schritt 3: Erstellung eines Dreiecks mit Hilfe eines Pfads context.fillStyle = "yellow"; context.beginPath(); context.moveTo(10, 145); context.lineTo(60, 195); context.lineTo(75, 95); context.fill(); } </script> </head>
Abbildung 2: Canvas JavaScript Beispiel Quelle: eigene Darstellung

Technologieabgrenzung

Der Code fr die Generierung des Canvas wird im Beispiel im Head-Bereich der Seite vorgenommen. Um sicherzustellen, dass vor Ausfhrung des Codes das Document Object Model vollstndig geladen ist, wird dieser im OnLoad-Event der Seite registriert. In der so definierten Call-Back Methode selbst wird dann in Zeile 6 der Code mit dem Canvas Element verknpft. Im nchsten Schritt wird ein rotes Quadrat erstellt. fillStyle enthlt hierfr den Wert rgba(0, 0, 200, 0.5). Der letzte Eintrag 0.5 kennzeichnet die Strke der Transparenz. fillRect wird fr Rechtecke verwendet und wird folgendermaen definiert: fillRect(y-Wert, x-Wert, Breite, Hhe). Die x- und y-Werte kennzeichnen den Startpunkt oben links. Die zweite Figur, ein gelbes Dreieck, wird mit Hilfe des Pfad-Werkzeugs gezeichnet. Dies wird erreicht, indem der Cursor auf einem Punkt mit moveTo(x-Wert, y-Wert) festgesetzt wird. Anschlieend werden von diesem Punkt zwei Linien mit lineTo(x-Wert, y-Wert) zu den anderen beiden Ecken gezogen. Der Befehl fill fllt das Dreieck mit der gelben Farbe, die zuvor mit fillStyle festgelegt wurde.

3
3.1

Technologieabgrenzung
Scalable Vector Graphics

SVG ist ein ebenfalls vom W3C spezifiziertes Format zur Beschreibung zweidimensionaler Vektorgrafiken auf Grundlage des XML-Standards (W3C 2011c). Wie auch das Canvas knnen Webinhalte im SVG-Format zumeist direkt vom Browser interpretiert werden (Hawkes 2011, S. 274). Zur Verdeutlichung von SVG wird beispielhaft die Definition eines Rechtecks aufgezeigt:
1 2 3 <svg width="200" height="200"> <rect x="50" y="50" width="100" height="100" fill="#000"/> </svg>

Abbildung 3: Beispiel Scalable Vector Graphics Quelle: eigene Darstellung

Als vektorbasiertes Grafikformat bietet SVG den Vorteil unabhngig der Auflsung des Anzeigegerts zu funktionieren. Dieser Vorteil ist nicht unwesentlich, da die damit inhrente interne Darstellung von SVG auch eine vereinfachte Manipulation des Bildes erlaubt. Natrlich ermglicht auch das Canvas Element, beispielsweise ber die Methode lineTo(), die Zeichnung von geometrischen Objekten. Da das Canvas jedoch eine Rastergrafik ist, werden Operationen pixelge-

Technologieabgrenzung

treu abgebildet und eine berarbeitung der auf einem Bild befindlichen Objekte ist nicht mglich. Hier hat SVG den Vorteil, dass mit Hilfe der DOM API die Objekte innerhalb des Bildes attributbasiert berarbeitet werden knnen (Sucan 2010). Ebenfalls problematisch an Canvas ist dessen barrierefreier Einsatz. Zwar existieren innerhalb des W3Cs Anstrengungen hierfr universell einsetzbare Lsungen zu finden (W3C 2011d), jedoch erlaubt die interne Darstellung des Canvas nicht, diese in anderen Kontexten, beispielsweise fr eine Audioausgabe oder auf Konsolenbrowsern, zu interpretieren. Die bisherigen Mglichkeiten beschrnken sich auf das in Kapitel 2.1 vorgestellte Konzept eines Alternativinhalts sowie mit JavaScript nutzbare Eigenentwicklung. Im Vergleich hierzu sind mit Hilfe von SVG definierte Inhalte als Text jederzeit interpretierbar, so dass selbst dann, wenn der Browser selbst kein SVG darstellen kann, eine Interpretation des Inhalts der SVG-Datei mglich ist (Hawkes 2011, S. 274). Zustzlich kann die Semantik der Darstellung mit Hilfe der ARIA-Attribute im XML detailliert beschrieben werden (W3C 2011d). Aus diesem Grund kommt Sucan auch zu dem Schluss, dass das Canvas fr die Gestaltung von Webseiten nicht eingesetzt werden soll (Sucan 2010). Weiterhin positiv fllt auf, dass SVG im Standard Animationen untersttzt (W3C 2011c). Ein standardisierter Mechanismus fr Animationen beim Einsatz von Canvas existiert nicht und muss daher vom Entwickler je nach Anforderung vollstndig neu entwickelt werden. Der groe Nachteil von SVG ist hingegen dessen geringe Geschwindigkeit bei hufigen und umfassenden nderungen. Durch den Zugriff und die Manipulation der Inhalte ber den DOM eignet sich letztendlich SVG nicht fr die Entwicklung von Spielen oder aufwndigen Animationen (Sucan 2010). Zusammenfassend lsst sich feststellen, dass Canvas immer dann eingesetzt werden sollte, wenn es um Spielegraphiken, Darstellungen mit einer hohen nderungsfrequenz sowie der interaktiven Bearbeitung von Rastergrafiken geht. In anderen Fllen, wie interaktiven Userinterfaces, Charts aber auch auflsungsunabhngigen Grafiken weist SVG Vorteile auf (Sucan 2010).

3.2

Adobe Flash Plattform

Adobe Flash ist eine Technologie-Plattform zur Erstellung und Verbreitung multimedialer interaktiver Webinhalte (IDC 2010, S. 1). Dies umfasst Werkzeuge zur Erstellung von Flash-basierten Content, Server sowie Clientprogramme zur Aus-

Fazit und Ausblick

fhrung der Flash-Dateien (IDC 2010, S. 3f). Fr die Anzeige in Browsern verfolgt Adobe einen plug-In basierten Ansatz. Wie auch Canvas wurde Flash ursprnglich zur Generierung von zweidimensionalen Animationen entwickelt. Seitdem hat sich Flash aber stark weiterentwickelt und bietet heute eine umfassende Plattform zur Generierung von Animationen, dem asynchronen Streaming von Videoinhalten und der Erzeugung komplizierter Browserspiele (IDC 2010, S. 3). Hierber hinaus untersttzt es die Anbindung von Peripheriegerte sowie ein umfassendes Rechtemanagement (kurz DRM) (IDC 2010, S. 4), was selbst mit HTML5 nicht abgebildet werden kann (W3C 2010). Ein Vergleich zwischen dem Canvas an sich und Flash kann sich daher nur auf Funktionalitten zur Generierung zwei- und dreidimensionalen Inhalten beziehen. Das entsprechende Pendant zu Canvas in Flash ist die Flash Drawing API (Adobe 2011, S. 220). Funktional und inhaltlich unterscheiden sich das HTML Canvas kaum von der in Flash enthaltenen Drawing API. Flash nimmt fr sich jedoch den groen Vorteil der browserbergreifen Kompatibilitt. Da der einzige nennenswerte Entwickler des Flash-Plugins Adobe ist, gibt es browser- und plattformbergreifend keine Unterschiede in der Darstellung. Beachtet man jedoch, dass die Untersttzung auf mobilen Endgerten fr Flash in naher Zukunft vollkommen entfallen wird (Winokur 2011), lsst sich dieser Vorteil nicht aufrecht halten. Ganz im Vergleich hierzu ist Canvas aufgrund des Zusammenspiels mit JavaScript der Vorteil zu eigen, im Rahmen des W3Cs entwickelt zu werden und damit unabhngig von Adobe als Hersteller einer so wichtigen Schlsseltechnologie zu sein. Aus architektonischer Perspektive knnen so Webanwendungen erstellt werden, die alleine auf Konzepte des W3C basieren.

Fazit und Ausblick

Bereits heute existieren praktische Szenarien, in denen die Canvas-Technik eindrucksvoll eingesetzt wird. Gute Beispiele sind die Amazon Kindle Reader App (https://read.amazon.com/) oder das erste interaktive Musikvideo Rome, welches unter http://ro.me abrufbar ist. Wichtig, und das hat die Teilleistung gezeigt, ist, dass Canvas als Bestandteil von HTML5 kein Allheilmittel sein will. Dies stellt bereits die Definition des Canvas im W3C Standard klar (W3C 2011a, S. 1) und wurde ebenfalls in Kapitel 3 dargestellt. Canvas sollte immer dann eingesetzt werden, wenn eine groe Anzahl an Animationen wie etwa bei Spielen oder aufwndigen Darstellungen notwendig ist

Fazit und Ausblick

(Sucan 2010). Andere Technologien wie SVG, Flash aber auch Techniken wie animierte Bilder weisen je nach Einsatzszenario Vor- und Nachteile auf. Ziel muss es daher sein, dass der Entwickler fr den einzelnen konkreten Anwendungsfall die optimale Webtechnologie auswhlen kann. Dies ist nur dann mglich, wenn dieser die Merkmale, Einsatzgebiete und Vorteile einzelner Techniken kennt und diese gegenber anderen Werkzeuge abgrenzen kann. Im Rahmen dieser Teilleistung wurde dies anhand der in HTML5 integrierten Schlsseltechnologie Canvas durchgefhrt.

Literaturverzeichnis

Literaturverzeichnis
Adobe Systems (2011) Actionscript 3.0. Developers Guide. http://help.adobe. com/en_US/as3/dev/as3_devguide.pdf. Abruf am 2011-12-25. Deveria A (2011) When can I use http://caniuse.com/#search=canvas. Abruf am 2011-12-25. Fulton S, Fulton J (2011) HTML5 Canvas. Native interactivity and animation for the Web. O'Reilly, Sebastopol. Hawkes R (2011) Foundation HTML5 Canvas. For Games and Entertainment. friends of ED; Apress, New York. IDC (2010) Adobe Flash in the Enterprise. The Case for More Usable Software. http://www.adobe.com/enterprise/pdf/idc.pdf. Abruf am 2011-12-27. Jobs S (2010) Thoughts on Flash. http://www.apple.com/hotnews/thoughts-onflash. Abruf am 2010-04-30. Khronos Group (2011) WebGL Specification. http://www.khronos.org/registry/ webgl/specs/latest/. Abruf am 2011-12-26. McKinney S (2011) Is Canvas the End of Flash? http://stairwellblog.com/2009/ 03/is-canvas-the-end-of-flash/. Abruf am 2011-12-23. Sucan M (2010) SVG or Canvas? Choosing between the two. http://dev. opera.com/articles/view/svg-or-canvas-choosing-between-the-two/. Abruf am 2011-11-30. Net Applications (2011) Operating System Market Share. http://marketshare. hitslink.com/operating-system-market-share.aspx?qprid=8. Abruf am 201110-16. Seidelin J (2009) HTML5 Canvas Cheat Sheet. http://www.nihilogic.dk/labs/ canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf. Abruf am 2011-10-14. Sinofsky S (2011) Metro style browsing and plug-in free HTML5. http://blogs. msdn.com/b/b8/archive/2011/09/14/metro-style-browsing-and-plug-in-freehtml5.aspx. Abruf am 2011-10-16. W3C (2011a) The canvas element. http://www.w3.org/TR/html5/the-canvaselement.html. Abruf am 2011-12-26. W3C (2011b) HTML Canvas 2D Context. http://www.w3.org/TR/2dcontext/. Abruf am 2011-12-26. W3C (2011c) Scalable Vector Graphics (SVG). http://www.w3.org/TR/SVG/. Abruf am 2011-12-26. W3C (2011d) Canvas Element Accessibility Issues. http://www.w3.org/html/wg/ wiki/AddedElementCanvas. Abruf am 2011-12-26.

Literaturverzeichnis

W3C (2010) Bug 10902. https://www.w3.org/Bugs/Public/show_bug.cgi? id=10902. Abruf am 2011-12-26. Winokur D (2011) Flash to Focus on PC Browsing and Mobile Apps; Adobe to More Aggressively Contribute to HTML5. http://blogs.adobe.com/ conversations/2011/11/flash-focus.html. Abruf am 2011-12-26.

Eidesstattliche Erklrung

10

Ich versichere an Eides statt durch meine Unterschrift, dass ich die vorstehende Arbeit selbstndig und ohne fremde Hilfe angefertigt und alle Stellen, die ich wrtlich oder annhernd wrtlich aus Verffentlichungen entnommen habe, als solche kenntlich gemacht habe, mich auch keiner anderen als der angegebenen Literatur oder sonstiger Hilfsmittel bedient habe. Die Arbeit hat in dieser oder hnlicher Form noch keiner anderen Prfungsbehrde vorgelegen.

Ort, Datum, Unterschrift