Du bist hier:Start»Javascript»Grafik

Canvas kann was - Grafik in Javascript

04.07.2014

Durch den neuen Web-Standard HTML5 wurde das <canvas>-Element eingeführt. Canvas bedeutet Leinwand und Javascript kann diese Leinwand bemalen. In Kombination mit Maus- und Tastatur-Ereignissen lassen sich mit Canvas deutlich komplexere Web-Anwendungen schreiben als bisher. Mit dem Web Graphics Layer (WebGL) können auch anspruchsvolle 3D-Anwendungen im Browser laufen.

Ein sinnvolles Beispiel für eine Canvas-Anwendung ist zygotebody.com (früher Google Body). Auf der Seite wird die Anatomie des Menschen im Web-Browser dargestellt. Die Anwendung kann per Maus gesteuert werden und ist intuitiv bedienbar. Leider ist Zygote Body mittlerweile nur noch mit einer Anmeldung auf der Website benutzbar.

Um WebGL in Firefox einzuschalten, muss in der Adresszeile about:config eingegeben und webgl.force-enabled auf den Wert true gesetzt werden.

webgl in Firefox einschalten

Außerdem muss im Menü unter Einstellungen der Abschnitt Erweitert ausgewählt werden. Unter dem Tab Allgemein muss das Häkchen gesetzt werden bei "Hardware-Beschleunigung verwenden, wenn verfügbar.

Firefox Hardware-Beschleunigung einschalten

Klassisches Beispiel für eine Anwendungsmöglichkeit von Canvas ist die Bildbearbeitung. In meiner kleinen Webanwendung habe ich einige Filter voreingestellt. Diese Filter können zum eigenen Experimentieren bearbeitet werden.

Außerdem habe ich eine Webapp zum Verschlüsseln eines Bildes und den Ansatz einer Mikroskopsimulation mit Canvas und HTML5 geschrieben.

Unter folgenden Links finden sich einige Demos zu Bildbearbeitung, 3D-Demos und Tutorials.