UX Abo

Neuer Workshop: "UX Metrics - Erfolgsmessung im UX Design".

Zeigt her!
Close

Canvas - Eine Gefahr für HTML & CSS?

Bild
Bild
canvas_kreis

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.

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.

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

Du willst mit jemanden über das Thema plaudern?

Einen kostenlosen Termin mit CEO Susanne vereinbaren!

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.
Bild
Die drei Speaker:innen der Veranstaltung
Sonstiges – Blogbeitrag

UX Snacks Vol.09

That’s a wrap on UX Snacks 2024. Am 7. November hat die vierte und letzte Ausgabe in diesem Jahr stattgefunden und wir nehmen mit diesem Recap ganz viel positive UX-Energie mit ins neue Jahr. Und keine Angst: Schon bald verkünden wir die Daten für 2025.

Jetzt lesen

Interesse mit uns zu arbeiten?

Lass uns plaudern …

oder vereinbare gleich mit unserer CEO Susanne einen kostenlosen Termin.