Canvas – Eine Gefahr für HTML & CSS?

26. Mai 2015, von lieAdmin2019

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.
canvas_kreis

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.

Bildschirmfoto 2015-05-26 um 06.24.04

30.000 Partikel


 
Auch sonst hat Canvas einige Vorteile: Bilder können mittels „Blend Modes“ (Multiplizieren, Addieren, …) ähnlich wie in Adobe Photoshop kombiniert und mit anderen Effekten überlagert werden. Die Möglichkeiten sind so weitreichend, dass es ganze Online-Bildeditoren basierend auf Canvas gibt.
picozu
 

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.
 

Stephan

Meine Rolle bei Liechtenecker: langgedienter Frontend-Veteran Wenn es weder IT noch Digitalisierung gäbe, wäre mein Beruf: Förster ohne Kontakt zu Menschen! Mein Herz schlägt für: die Arterien.
1 Kommentar.
Kommentar verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
28. Mai 2015 um 15:52

Naja, „Gefahr“ ist wohl etwas viel gesagt. Genau wie jede andere Technik hat Canvas Vor- und Nachteile und man sollte keine ganzen Sites damit bauen…

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
Natalia und Marion reden über Usertests
UX/UI Design – Blogbeitrag

9 Fragen zum User Test – was Sie als Auftraggeber wissen sollten

18. September 2019, von Natalia

Euch steht ein User Test bevor? Die Agentur schreibt irgendwas von einem Usability Testing ins Angebot? Und ihr fragt euch jetzt, was das alles bedeutet? Dann lest hier die häufigsten Fragen und Antworten zum Thema User Testing.

Jetzt lesen
Susanne Liechtenecker und Christiane Bertolini
Inspiration – Podcasts

Folge #52 mit Christiane Bertolini

27. September 2019

Christiane Bertolini ist Betriebswirtschafterin und seit der Jahrtausendwende unternehmerisch tätig. Als Entwicklerin, Inkubatorin, hands-on Trendexpertin und Sparringspartner agiert sie cross industries, immer mit einem speziellen Twist.

Jetzt anhören
Close