UX Audit

Wir trainieren dein Team? Buch unsere Workshops, Trainings und Coachings.

Zeigt her!
Close

Canvas – Eine Gefahr für HTML & CSS?

26. Mai 2015, von stephan

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.
 

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.
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!
Technologie – Blogbeitrag

Die Macht von PHPStan: Fehlererkennung und Codequalität in der PHP-Entwicklung

21. März 2024, von Daniel

In der Welt der Webentwicklung ist die Qualität des Codes von entscheidender Bedeutung. Schlecht geschriebener Code kann zu Bugs, Sicherheitslücken und ineffizienter Leistung führen. PHPStan ist ein leistungsstarkes statisches Analysetool, das dazu beitragen kann, die Codequalität zu erhöhen und Bugs frühzeitig zu erkennen. In diesem Beitrag werden wir uns genauer ansehen, welche Arten von Fehlern PHPStan erkennen kann und welche Aufgaben möglicherweise andere Tools übernehmen müssen.

Jetzt lesen
Liechtenecker Leseliste #62 mit Susanne Liechtenecker
Inspiration – Podcasts

Folge #62 mit Susanne Liechtenecker

27. November 2020

In Folge 62 besinnt sich Susanne auf die Anfänge dieses Podcasts und begrüßt keinen Gast, sondern erzählt über das Buch "Jäger, Hirten, Kritiker" von Richard David Precht und warum es sie inspiriert hat.

Jetzt anhören
Close