201001Jul

Webentwicklung: HTML5 Canvas Cheatsheet

Eine der wichtigsten Funktionen des neuen HTML5-Standards dürfte das canvas-Element sein, mit dem sich grafische Objekte zeichnen lassen. Zudem können mit der Canvas-Funktionalität Bildmanipulationen vorgenommen werden, so dass auch erweiterte Operationen möglich sind. In meiner Firefox-Erweiterung PixelZoomer habe ich Canvas beispielsweise für die Pipette (Color Picker) verwendet — in Echtzeit wird ein kleines canvas-Element unter dem Mauszeiger positioniert, welches per Klick die RGB-Daten des ausgewählten Pixels ausgibt.
Um sich einen Überblick der verfügbaren Canvas-Funktionen zu verschaffen, bietet sich nun das HTML5 Canvas Cheatsheet an. Die Übersicht enthält alle Funktionen und Parameter des HTML5-Elements und zeigt zudem anhand von Grafiken die Optionen der "globalCompositeOperation()"-Funktion.

HTML5 Canvas Cheatsheet

Neben dem eigentlichen Inhalt des Cheatsheets ist die verwendete HTML-Programmierung einen Blick wert: Die Seite wurde mit HTML5 umgesetzt und bei einer Größenänderung des Browserfensters kommt die verwendete CSS-Einstellung "column-width" des article-Elements zur Geltung. Das Cheatsheet gehört auf jeden Fall in die Sammlung bestehender HTML5-Ressourcen.