Neue Dokumentation und Features für Canvas 2D
Kommentare

In den letzten Monaten wurde die Weiterentwicklung des canvas-Elements deutlich vorangetrieben und mithilfe des Adobe-Web-Platform-Teams einige neue HTML-Canvas-2D-Features in den „großen“ Browsern wie Firefox und Chrome hinzugefügt.

Dazu erhielt auch die Dokumentation von Canvas 2D in Mozillas Developer Network nun ein umfassendes Update, um den aktuellen Status des Canvas-Standards und seiner Browser-Implementierung zum Ausdruck zu bringen. Florian Scholz zeigt im Mozilla-Entwickler-Blog, welche Neuerungen es gab und wie sie sich nutzen lassen.

Neue Canvas-2D-Features

Seit Firefox 31 gibt es ein neues Path2D-API, mit dem Pfade gespeichert werden können, um den Canvas-Zeichen-Code zu vereinfachen und dessen Ausführung zu beschleunigen. Mit dem Constructor lassen sich Path2D-Objekte auf drei verschiedene Arten erstellen, wobei eine davon die Wiederverwendung von SVG-Pfaden ermöglicht, um die gleichen Formen direkt auf den Canvas zu zeichnen.

Eine weitere Neuerung ist der Support von Hit Regions, den es seit Firefox 32 gibt. Mit diesen lässt sich leichter überprüfen, ob sich die Maus innerhalb eines bestimmten Bereichs befindet, ohne die Koordinaten manuell prüfen zu müssen. Mit addHitRegion wird eine Hit Region zu einem aktuellen oder einem Path2D-Pfad hinzugefügt; zudem wurde hierfür das MouseEvent-Interface erweitert.

Ebenso wurde in Firefox 32 das drawFocusIfNeeded(element)-Property verfügbar gemacht, mit dem Fokusringe auf dem Canvas gezeichnet werden können. Seit Firefox 35 bietet der Browser Support für Filter auf dem Canvas-Rendering-Kontext, deren Syntax mit der Syntax des CSS-Filter-Properties übereinstimmt.

Weitere Änderungen umfassen zum Beispiel die Implementierung des alpha-context-Attributs, die Möglichkeit, Transformationen zurückzusetzen sowie die Option, Transformationen zu Pattern hinzuzufügen.

Die Dokumentation im Mozilla Developer Network bietet eine Übersicht über alle Einsatzmöglichkeiten von Canvas 2D Graphics; zudem findet sich dort auch ein Tutorial, das Entwicklern einen guten Einstieg in die Nutzung bietet.

Aufmacherbild: Macro of an artist canvas on wooden table von Shutterstock / Urheberrecht: Antonio Gravante

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -