Sie sind auf Seite 1von 13

User Centered Web Design

Teilleistung

HTML5 Canvas - Einsatz und Abgrenzung

Web Design Teilleistung HTML5 Canvas - Einsatz und Abgrenzung Christoph Böhm Wintersemester 2011 Umfang: 16876 Zeichen

Christoph Böhm Wintersemester 2011

Umfang: 16876 Zeichen

Inhaltsverzeichnis

I

Inhaltsverzeichnis

Abbildungsverzeichnis

II

Abkürzungsverzeichnis

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:

Das Canvas-Tag

2

Abbildung 2:

Canvas JavaScript Beispiel

4

Abbildung 3: Beispiel Scalable Vector Graphics

5

Abkürzungsverzeichnis

API

Application programming interface

CSS

Cascading

Style Sheets

DOM

Document

Object Model

HTML

Hypertext Markup Language

SVG

Seite Scalable Vector Graphics

W3C

World Wide Web Consortium

WebGL

Web Graphics Library

XML

Extensible Markup Language

Einleitung

1

1 Einleitung

Mit der Ankündigung Microsofts, auf HTML5 bei der neu gestalteten Oberfläche des künftigen Betriebssystem Windows 8 zu setzen, wurde auch bekannt, dass der hierfür zum Einsatz kommende Internet Explorers 10 keine Plug-Ins wie Flash oder Silverlight unterstützen wird (Sinofsky 2011). Damit bekennt sich nach Apple (Jobs 2011) auch der größte 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 begründet den Schritt mit der hierdurch erzielbaren höheren Sicherheit, der Zuverlässigkeit sowie der besseren Ressour- cennutzung (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 geschaffe- nen Möglichkeiten zur interaktiven Gestaltung multimedialer Webinhalte einge- gangen werden. Weitergehend soll diese Technik gegenüber etablierten Web- Technologien, hier konkret SVG und Flash, abgegrenzt werden, um Vor- und Nachteile sowie Einsatzgebiete aufzuzeigen. Zum Schluss wird ein Fazit gezogen.

2 HTML5 Canvas

2.1

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 zusätzlich als entscheidendes Merkmal dieser Technik heraus, dass im Gegensatz zu vergleichbaren Technologien Operationen nach Speiche- rung pixelgetreu umgesetzt werden. Eine Nachbearbeitung gezeichneter Objekte auf dem Canvas, beispielsweise über Attribute, ist damit nicht möglich (Fulton et al. 2011, S. 1).

Das Canvas Element wird in ein HTML Dokument mit folgendem Code eingebun- den:

HTML5 Canvas

2

1

<canvas id="myDrawing" width="200" height="200">

2

<p>Your browser doesn't support canvas.</p>

3

</canvas>

Abbildung 1: Das Canvas-Tag Quelle: eigene Darstellung

Das Canvas-Tag hat die Attribute width und height für die Angabe von Höhe und Breite der Zeichenoberfläche. Innerhalb der Canvas-Tags kann, sofern der je- weils vom Benutzer eingesetzte Browser HTML5 nicht unterstützt, ein Fallback definiert werden. Dieser wird dann anstelle der graphischen Darstellung dem Anwender präsentiert (W3C 2011a). Bereits heute unterstützen jedoch nahezu alle gängigen Browser dieses Tag (Deveria 2011, S. 1).

Die Funktionalität und Mächtigkeit von Canvas ergibt sich aus dem Zusammen- spiel mit JavaScript. Für den Zugriff auf das Canvas-Tag stellt das W3C eine Schnittstellenbeschreibung bereit, welche unter dem Titel HTML Canvas 2D Context geführt wird. (W3C 2011b, S.1 ff). Dieses sieht eine zweidimensionale Zeichenoberfläche vor, auf der je nach Anwendungsfall Bilder, Linien, Pfade, Transformationen und weitergehende geometrische Operationen ausgeführt wer- den können (W3C 2011b, S.1 ff sowie Kapitel 2.2). Zusätzlich geht der Standard aber explizit davon aus, dass die Nutzung des Canvas ebenfalls auch in anders- artigen Kontexten möglich ist. Bereits heute existiert WebGL, eine außerhalb des W3Cs entwickelte Spezifikation zur Darstellung dreidimensionaler Inhalte unter Nutzung des Canvas-Tags (Khronos Group 2011).

Im Zusammenspiel mit den generell in JavaScript verfügbaren Paradigmen wie Events, Objekte sowie Klassen können mit Canvas entsprechend umfassende Anwendungsfälle 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 näher betrachtet werden sollen.

Folgende grundlegenden Operationen lassen sich gemäß Seidel et al. mit Hilfe der Canvas 2D API ausführen (Seidelin 2009, S.1f):

Text: Mit dem HTML5 Canvas können von einfachem Text bis hin zu komple- xen und nicht mit CSS realisierbare Texteffekte umgesetzt werden.

Image Drawing: Unter Nutzung der Canvas-API können Bilddaten geladen und direkt auf das Canvas übertragen werden. Für die Weiterbearbeitung der

HTML5 Canvas

3

Bildinhalte stehen Methoden, beispielsweise für das Ausschneiden oder das Zusammenführen von Bildbestandteilen bereit.

Rectangle: Ermöglicht die Erstellung von einfachen Rechtecken auf dem Canvas Objekt.

Path: Ermöglicht ausgehend von einem festgelegten Startpunkt die Erstel- lung beliebiger geometrischer Objekte. Hierzu werden einzeln gezeichnete Punkte über Quadratische- oder Bezierkurven zu einer Fläche verbunden.

Pixel Manipulation: Ermöglicht die pixelgetreue Manipulation beziehungswei- se das Auslesen des Bildinhaltes auf Pixelebene.

Transformation: Ermöglicht Elemente auf dem Canvas zu transformieren, das heißt zu vergrößern, zu verkleinern und zu rotieren.

Compositing: Compositing beschreibt die Art und Weise, wie überschneiden- de Elemente auf dem Canvas angeordnet und dargestellt werden.

Wie anhand obiger Auflistung festgestellt werden kann, unterstützt die Canvas API nur grundlegende Bildbearbeitungsoperationen, was als ein zentraler Nach- teil dieser ausgelegt wird (Fulton et al. 2011, S. 380). Umfangreiche Animatio- nen und Transitions müssen aufwändig entwickelt werden. Entwicklungsumge- bungen und umfangreiche Libraries, die diesen Prozess automatisieren können, 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

4

Der Code für die Generierung des Canvas wird im Beispiel im Head-Bereich der Seite vorgenommen. Um sicherzustellen, dass vor Ausführung des Codes das Document Object Model vollständig geladen ist, wird dieser im OnLoad-Event der Seite registriert. In der so definierten Call-Back Methode selbst wird dann in Zei- le 6 der Code mit dem Canvas Element verknüpft.

Im nächsten Schritt wird ein rotes Quadrat erstellt. fillStyle enthält hierfür den Wert rgba(0, 0, 200, 0.5). Der letzte Eintrag 0.5 kennzeichnet die Stärke der Transparenz. fillRect wird für Rechtecke verwendet und wird folgendermaßen definiert: fillRect(y-Wert, x-Wert, Breite, Höhe). Die x- und y-Werte kennzeich- nen den Startpunkt oben links.

Die zweite Figur, ein gelbes Dreieck, wird mit Hilfe des Pfad-Werkzeugs gezeich- net. Dies wird erreicht, indem der Cursor auf einem Punkt mit moveTo(x-Wert, y-Wert) festgesetzt wird. Anschließend werden von diesem Punkt zwei Linien mit lineTo(x-Wert, y-Wert) zu den anderen beiden Ecken gezogen. Der Befehl fill füllt das Dreieck mit der gelben Farbe, die zuvor mit fillStyle festgelegt wurde.

3

Technologieabgrenzung

3.1 Scalable Vector Graphics

SVG ist ein ebenfalls vom W3C spezifiziertes Format zur Beschreibung zweidi- mensionaler Vektorgrafiken auf Grundlage des XML-Standards (W3C 2011c). Wie auch das Canvas können Webinhalte im SVG-Format zumeist direkt vom Browser interpretiert werden (Hawkes 2011, S. 274).

Zur Verdeutlichung von SVG wird beispielhaft die Definition eines Rechtecks auf- gezeigt:

1

<svg width="200" height="200">

2

<rect x="50" y="50" width="100" height="100" fill="#000"/>

3

</svg>

Abbildung 3: Beispiel Scalable Vector Graphics Quelle: eigene Darstellung

Als vektorbasiertes Grafikformat bietet SVG den Vorteil unabhängig der Auflö- sung des Anzeigegeräts zu funktionieren. Dieser Vorteil ist nicht unwesentlich, da die damit inhärente interne Darstellung von SVG auch eine vereinfachte Ma- nipulation des Bildes erlaubt. Natürlich ermöglicht auch das Canvas Element, beispielsweise über die Methode lineTo(), die Zeichnung von geometrischen Ob- jekten. Da das Canvas jedoch eine Rastergrafik ist, werden Operationen pixelge-

Technologieabgrenzung

5

treu abgebildet und eine Überarbeitung der auf einem Bild befindlichen Objekte ist nicht möglich. Hier hat SVG den Vorteil, dass mit Hilfe der DOM API die Ob- jekte innerhalb des Bildes attributbasiert überarbeitet werden können (Sucan

2010).

Ebenfalls problematisch an Canvas ist dessen barrierefreier Einsatz. Zwar exis- tieren innerhalb des W3Cs Anstrengungen hierfür universell einsetzbare Lösun- gen zu finden (W3C 2011d), jedoch erlaubt die interne Darstellung des Canvas nicht, diese in anderen Kontexten, beispielsweise für eine Audioausgabe oder auf Konsolenbrowsern, zu interpretieren. Die bisherigen Möglichkeiten beschränken 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 In- halts der SVG-Datei möglich ist (Hawkes 2011, S. 274). Zusätzlich kann die Semantik der Darstellung mit Hilfe der ARIA-Attribute im XML detailliert be- schrieben werden (W3C 2011d). Aus diesem Grund kommt Sucan auch zu dem Schluss, dass das Canvas für die Gestaltung von Webseiten nicht eingesetzt werden soll (Sucan 2010).

Weiterhin positiv fällt auf, dass SVG im Standard Animationen unterstützt (W3C 2011c). Ein standardisierter Mechanismus für Animationen beim Einsatz von Canvas existiert nicht und muss daher vom Entwickler je nach Anforderung voll- ständig neu entwickelt werden.

Der große Nachteil von SVG ist hingegen dessen geringe Geschwindigkeit bei häufigen und umfassenden Änderungen. Durch den Zugriff und die Manipulation der Inhalte über den DOM eignet sich letztendlich SVG nicht für die Entwicklung von Spielen oder aufwändigen Animationen (Sucan 2010).

Zusammenfassend lässt sich feststellen, dass Canvas immer dann eingesetzt werden sollte, wenn es um Spielegraphiken, Darstellungen mit einer hohen Än- derungsfrequenz sowie der interaktiven Bearbeitung von Rastergrafiken geht. In anderen Fällen, wie interaktiven Userinterfaces, Charts aber auch auflösungsun- abhängigen Grafiken weist SVG Vorteile auf (Sucan 2010).

3.2 Adobe Flash Plattform

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

Fazit und Ausblick

6

führung der Flash-Dateien (IDC 2010, S. 3f). Für die Anzeige in Browsern ver- folgt Adobe einen plug-In basierten Ansatz.

Wie auch Canvas wurde Flash ursprünglich zur Generierung von zweidimensiona- len 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). Hierüber hinaus unterstützt es die Anbindung von Peripheriegeräte 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 Funktionalitäten 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 für sich jedoch den großen Vorteil der browserübergreifen Kompatibilität. Da der einzige nennenswerte Entwickler des Flash-Plugins Adobe ist, gibt es browser- und plattformübergreifend keine Unterschiede in der Darstellung. Beachtet man jedoch, dass die Unterstützung auf mobilen Endgeräten für Flash in naher Zukunft vollkommen entfallen wird (Winokur 2011), lässt sich dieser Vorteil nicht aufrecht halten.

Ganz im Vergleich hierzu ist Canvas aufgrund des Zusammenspiels mit Ja- vaScript der Vorteil zu eigen, im Rahmen des W3Cs entwickelt zu werden und damit unabhängig von Adobe als Hersteller einer so wichtigen Schlüsseltechnolo- gie zu sein. Aus architektonischer Perspektive können so Webanwendungen er- stellt werden, die alleine auf Konzepte des W3C basieren.

4 Fazit und Ausblick

Bereits heute existieren praktische Szenarien, in denen die Canvas-Technik ein- drucksvoll eingesetzt wird. Gute Beispiele sind die Amazon Kindle Reader App (https://read.amazon.com/) oder das erste interaktive Musikvideo Rome, wel- ches 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 darge- stellt. Canvas sollte immer dann eingesetzt werden, wenn eine große Anzahl an Animationen wie etwa bei Spielen oder aufwändigen Darstellungen notwendig ist

Fazit und Ausblick

7

(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 für den einzelnen konkreten An- wendungsfall die optimale Webtechnologie auswählen kann. Dies ist nur dann möglich, wenn dieser die Merkmale, Einsatzgebiete und Vorteile einzelner Tech- niken kennt und diese gegenüber anderen Werkzeuge abgrenzen kann. Im Rah- men dieser Teilleistung wurde dies anhand der in HTML5 integrierten Schlüssel- technologie Canvas durchgeführt.

Literaturverzeichnis

8

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-on- flash. 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 2011-

10-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-free-

html5.aspx. Abruf am 2011-10-16.

W3C (2011a) The canvas element. http://www.w3.org/TR/html5/the-canvas- element.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

9

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 Erklärung

10

„Ich versichere an Eides statt durch meine Unterschrift, dass ich die vorstehende Arbeit selbständig und ohne fremde Hilfe angefertigt und alle Stellen, die ich wörtlich oder annähernd wörtlich aus Veröffentlichungen 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 Prüfungsbehörde vorgelegen.“

Ort, Datum, Unterschrift