Canto.js: Vereinfachtes API für HTML5-Canvas

Der Entwickler und Buchautor David Flanagan hat mit Canto.js eine Javascript-Bibliothek veröffentlicht, die den Umgang mit dem Canvas-Element aus HTML5 vereinfacht, wenn es um 2D-Zeichnungen geht.

29. Juli 2010 um 09:51 Uhr / Jens Ihlenfeld

Canto.js definiert eine einzelne Factory-Funktion namens canto(). Wird dieser ein Canvas-Element oder die ID eines Canvas-Elements übergeben, gibt die Funktion ein Canto-Objekt zurück. Dabei handelt es sich um einen Zeichen-Kontext, wie ihn auch die Funktion getContext('2d') zurückgibt.

Der Vorteil: Das Canto-Objekt implementiert ein vereinfachtes 2D-Zeichen-API, funktioniert ansonsten aber wie gehabt. So soll sich Canto leicht in bestehenden Code integrieren lassen.

Da alle Canto-Methoden, die keine expliziten Rückgabewerte haben, das Canto-Objekt zurückgeben, lassen sich die Funktionen des Canto-APIs leicht verketten. Das kennt man beispielsweise von jQuery. Der Aufruf "canto("canvas_id").moveTo(100,100).lineTo(200,200,100,200).closePath().stroke();" zeichnet beispielsweise ein Dreieck, wobei die Funktion lineTo() vier Argumente aufnimmt, so dass mit einem Aufruf zwei Linien gezeichnet werden können.

Einigen Funktionen, darunter stroke(), drawImage() und fillText(), können zusätzliche Grafikattribute wie Farbe und die Breite der zu zeichnenden Linie mitgegeben werden: "canto("canvas_id").moveTo(100,100).lineTo(200,200,100,200).closePath().stroke({lineWidth: 15, strokeStyle: "red"});"

Flanagan, der einige Bücher zu Java und Javascript für O'Reilly geschrieben hat, hat Canto.js unter der MIT-Lizenz als Open Source freigegeben und den Code unter code.google.com veröffentlicht.