Ajaxschmiede.de

Bewegte Bilder, sprich Animationen, sind seit jeher ein Hingucker auf jeder Homepage. In der Vergangenheit griffen Webentwickler bei einfachen Animationen auf bewegte GIF-Dateien zurück, die Einzelbilder beinhalten und zeitversetzt wiedergeben. Für aufwendigere Szenen musste auf das Adobes (ehemals Macromedia) Flash-Format auswischen werden.

Flash bietet sehr vielseitige Möglichkeiten und gilt seit jeher de facto als Standard für Webanimationen. Die Wiedergabe geschieht über den kostenfreien Flash-Player, der mittels Plugin in den Browser eingebunden wird. Jedoch handelt es sich bei Flash um eine proprietäre Software. Sie muss also durch teure Lizenzgebühren erworben werden um eigene Anwendungen in Flash zu erstellen.

Genau hier fehlte es bisher an geeigneten Alternativen.

Bereits vor über einem Jahr veröffentlichte Ilmari Heikkinen – wohl weitestgehend unbemerkt – seine Javascript-Bibliothek CakeJS (Canvas Animation Kit Experiment). CakeJS orientiert sich im Groben am „großen Bruder“ Flash.

Auf der Demo-Seite des Projekts finden sich zahlreiche kleine Beispielanimationen, die einen Vorgeschmack darauf geben, was mit CakeJS möglich ist. Das Highlight sind die beiden mit CakeJS erstellten Spiele Missle Fleet und Web Mega Pong. Beide Spiele lassen sich leicht per Tastatur steuern und machen ziemlich Spaß.

In der umfangreichen Dokumentation findet man eine gute Übersicht aller zur Verfügung stehenden Funktionen und Methoden samt Erklärungen.

CakeJS ist für Browser entwickelt wurden, die von Haus aus Canvas unterstützen und funktioniert mit Firefox (2+), Safari (3+) und Opera (9.6+). Grundsätzlich sollte es zwar möglich sein, dass CakeJS auch in Microsofts Internet Explorer mittels ExplorerCanvas läuft, jedoch scheint die Ausführungsgeschwindigkeit zu langsam und der Resourcenverbrauch zu hoch zu sein um die Animationen ordentlich darstellen zu können.

Vorgenommen hatte sich Heikkinen viel: Physikengine, Kollisionsabfrage und das Senken der CPU-Last, doch seit mehreren Monaten steht die Entwicklung still. Vielleicht kommt demnächst ja doch noch eine neuere Version…

In letzter Zeit habe ich mich verstärkt wieder mal mit Canvas beschäftigt. Dabei ging es mir vor allem um regelmäßige Vielecke (englisch: regular polygons).

Von Haus bietet Canvas in keiner Implementierung eine Funktion zum schnellen und einfachen Erzeugen von regelmäßigen Vielecken. Daher setzte ich mich hin und programmierte angeregt durch canvas.quaese.de zwei entsprechenende canvas-Objekterweiterungen.

Außerdem wollte ich gern gezackte Figuren wie Sterne und Sonnen mit einem Funktionsaufruf erzeugen können. Also nahm ich meinen bisherigen Code her und überarbeitete ihn.

Das Ergebnis all des Codens kann sich meines Erachtens sehen lassen. Vor allem bei Mehrfachaufrufen ergeben sich sehr schicke Muster.

Die Methoden selbst sind nach einem simplen Prinzip aufgebaut. Man gibt die Position des Vieleckmittelpunktes, die Anzahl der Ecken, den Radius (Mittelpunkt->Ecke) und Anfangswinkel (meist 0) an.

Den Quelltext der Objekterweitungen kann ich nachfolgend sehen:

canvas.drawPoly = function(x,y,n,r,phi) {
this.translate(x,y);
this.rotate(phi);
this.beginPath();
this.moveTo(0,r);

for( var i=0; i<=n; i++){
this.save();
this.rotate(2*i*Math.PI/n);
this.lineTo(0,r);
this.restore();
}
this.stroke();
this.rotate(-phi);
this.translate(-x,-y);
}

canvas.fillPoly = function(x,y,n,r,phi) {
this.translate(x,y);
this.rotate(phi);
this.beginPath();
this.moveTo(0,r);

for( var i=0; i<=n; i++){
this.save();
this.rotate(2*i*Math.PI/n);
this.lineTo(0,r);
this.restore();
}
this.fill();
this.rotate(-phi);
this.translate(-x,-y);
}

canvas.drawZickzack = function(x,y,n,r1,r2,phi) {
this.translate(x,y);
this.rotate(phi);
this.beginPath();
this.moveTo(0,r1);

for( var i=0; i<=n; i++){
this.save();
this.rotate(2*i*Math.PI/n);
this.lineTo(0,r1);
this.restore();
this.save();
this.rotate(2*i*Math.PI/n+(2*Math.PI/n)/2);
this.lineTo(0,r2);
this.restore();
}

this.stroke();
this.rotate(-phi);
this.translate(-x,-y);
}

canvas.fillZickzack = function(x,y,n,r1,r2,phi) {
this.translate(x,y);
this.rotate(phi);
this.beginPath();
this.moveTo(0,r1);

for( var i=0; i<=n; i++){
this.save();
this.rotate(2*i*Math.PI/n);
this.lineTo(0,r1);
this.restore();
this.save();
this.rotate(2*i*Math.PI/n+(2*Math.PI/n)/2);
this.lineTo(0,r2);
this.restore();
}

this.fill();
this.rotate(-phi);
this.translate(-x,-y);
}

// Anwendungsbeispiel:
canvas.fillStyle = "#009";
canvas.strokeStyle = "rgb(0,0,0)";
canvas.lineWidth = 2;
// Sechseck
canvas.drawPoly(60,60,6,40,0);

Im Grundlagenbeitrag zu Canvas kann man sich genauere Informationen zum Einbau holen. Auch ein Blick in den Quellcode meiner angefertigen Demo hilft sich dem ein oder anderen und zeigt die Möglichkeiten der Methoden auf.

In den vergangenen Monaten habe ich schon viel über Canvas geschrieben. Doch etwas fehlte mir um damit umfassendere, grapfische Projekte umzusetzen: Die Möglichkeit Text zu integrieren.

Methoden zum Darstellen von Text sind in den (vorläufigen) Spezifikationen des Canvas-Elementes bereits vorgesehen.

Aktuelle Versionen von Webkit, Safari4 (Beta), Chrome 2 (Beta) und Firefox 3.5 (Beta) implementieren die Canvas-Text-Methoden, doch für die breite Masse eingesetzter Browser gilt dies nicht.

Die Lösung liefert ein Javascript-Bibliothek mit dem einfachen und treffenden Namen canvas-text.

Diese Bibliothek fügt die drei HTML5-Methoden zum Zeichnen von Text in Canvas (strokeText, fillText und measureText) den Browsers hinzu, die diese Funktionen nicht von Haus aus beherrschen (Firefox 2/3.0, Internet Explorer 6+, Opera 9+, Safari 3 und Chrome 1.0).

Canvas-text wurde so umgesetzt, dass es die Richtlinien des W3C und des WHATWG für das canvas-Elemente nach HTML5 erfüllt. Außer der ExCanvas-Bibliothek für den Internet Explorer und der canvas.text.js-Datei werden keine anderen Dateien benötigt.

Vorhandene browser-spezifische Implementierungen werden nicht überschrieben, es sei denn, man gibt dies explizit an.

Der Einbau sieht wie folgt aus:

<!--[if IE]><script type="text/javascript" src="excanvas.js" /><![endif]-->
<script type="text/javascript" src="canvas.text.js" />

Um canvas.text auch zu nutzen,benötigt man nun noch Schriftarten. Typeface.js bietet einige Font-Files an. Eine größere Auswahl gibt es bei Mada’s Playground. Diese müssen unbedingt in einem Ordner mit dem Namen faces abgelegt werden, der sich im selben Verzeichnis wie die Datei canvas.text.js befindet.

Zudem gilt es zu beachten:

Der Dateiname canvas.text.js darf NICHT geändert werden!

Die Schriftartendateien müssen klein geschrieben werden und dem Format family-weight-style.js entsprechen. Family gibt den Namen der Schriftart an wie Arial oder Times new roman, weight steht für die Stärke (bold [=fett] oder normal) und style für den Stil (italic [=kursiv] oder normal).

Bei Schriften mit mehreren Wörtern werden die Leerzeichen durch Unterstriche ( _ ) ersetzt.

Hier ein korrektes Beispiel: optimer-normal-normal.js

Die Schriftarten-Dateien müssen nicht explizit eingebunden werden. Dies geschieht per Ajax zur Laufzeit.

Die browsereigenen canvas.text-Umsetzungen lassen sich per Schalter deaktivieren. Dafür ist folgender Aufruf geeignet:

<script type="text/javascript" src="canvas.text.js?reimplement=true" />

Auf der Projektseite von canvas.text finden sich 5 Live-Demos, die die Möglichkeiten aufzeigen. Ein Blick in den Quellcode zeigt auch einige Kniffe zur Umsetzung.

Zu guter letzt noch ein Codeschnipsel, wie man in Canvas dann damit umgeht:

canvas.font = "20px 'optimer'";
canvas.strokeStyle = "rgb(0,0,200)";
canvas.textAlign = 'left';
canvas.textBaseline = 'middle';
canvas.fillText('Ein normaler Beispieltext ...', 150, 100);
canvas.font = "bold 25px 'optimer'";
canvas.strokeText('... und noch ein fetter Beispieltext', 150, 200);

Auf seiner Page Nihilogic zeite Jacob Seidelin vor wenigen Tagen grafische Darstellungen der gängigsten Sortieralgorithmen. Umgesetzt hat er dies nur mitteln Canvas und Javascript.

Angeregt durch einen Bericht von Aldo Cortesi über die Visualisierung von Algorithmen, machte er sich dran, die bestehende Python/Cairo-Bibliothek in Javascript umzusetzen und zu Darstellung Canvas zu nutzen.

Seidelin brauchte zur Realisierung seines Vorhabens lediglich einen Vormittag. Der Code ist – wie er selbst zugibt – nur „quick and dirty“, also unsauber und in keinster Weise optimiert.

Man kann etliche Einstellungen an seiner Demonstration ändern. Vor allem di Auswahl zwischen den grundverschiedenen Algorithmen finde ich hervorragend. Zur Wahl stehen: Quicksort, Heapsort, Selection Sort, Insertion Sort, Bubblesort und Shell Sort. Die meisten kenne ich selbst noch von Informatikvorlesungen.

Kurz nach Erscheinen der finalen Internet Explorer 8-Version, stellte Erik Arvidsson im eigenes eingerichteten Explorer Canvas-Blog eine – längst überfällige – neue, überarbeitete Version von ExCanvas zum Anzeigen von Canvas-Grafiken mittels VML Im Microsoft-Browser.

Auffälligste Neuerung ist die Unterstützung des IE8. Da der neuste Redmonder Sprößling in Sachen VML etliches anderes handhabte als die Vorgänger, hatten die Explorer Canvas-Entwickler etliches zu tun um ihre Bibliothek für den IE8 fit zu bekommen.

Zusätzlich wurden eine Vielzahl Fehler behoben und einige Funktionen erweitert und beschleunigt. Die Änderungsliste fällt umfangreich aus:

• die Methoden transform und setTransform wurde nach HTML5-Standard integriert
• der aktuelle Pfad wird bei strokeRect, fillRect und clearRect nun stets korrekt entfernt
• vollständige Unterstützung des IE8 in allen Modi
• diverse Fehler in linearen Farbverläufen behoben
• neue, erweiterte Methode zur Berechnung der Linienstärke
• Rendern von Linien mit einer Stärke kleiner 1px sehen besser aus
• stroke-Methode ignoriert nun nicht mehr lineCap, lineJoin and miterLimit, falls fillStyle-Attribut gesetzt wurde
• stroke schließt nun nicht mehr automatisch den Pfad
• strokeRect und fillRect schließt nun stets korrekt den Pfad
• Einbau des document.createElement(‚canvas‘)-Hacks von Sjoerd Visscher
• diverse Speicherlecks wurden gefixt

Seit einger Zeit gibt es die Physikengine Box2D. Diese Bibliothek hat der Japaner Ando Yasushi automatisch in Javascript portiert.

Um JS-Box2D nutzen zu können, benötigt man neben der eigenen Klasse noch Prototype und ExplorerCanvas, da die Darstellung sonst in Microsoft-Browser nicht funktioniert.

Auf der Projektseite stehen einige Beispiele und auch Codeschnipsel zur Verfügung um eigene Anwendungen mit Physikeffekten zu erstellen.

Ich kann mir vorstellen, dass einige pfiffige Leute daraus einen js-basierten Bridgebuilder entwerfen. Was für eine coole Vorstellung.

Nachdem ich vor etlichen Wochen mit Liquid Canvas ein Lösung vorgestellt habe, wie man auf einfache Weise im nachhinein seinen Elementen runde Ecken verpassen kann, ließ mich das Thema seitdem nicht mehr los.

Bei der Suche noch dem besten und ultimativen Ansatz habe ich etliche interessante Projekte ausprobiert.

Vier Lösungsansätze möchte ich hier genauer vorstellen und auf den Einbau und deren Funktionsweise eingehen. Zusätzliche werde ich noch ein paar Alternativen nennen.

jQuery Round Corner

Avinoam Henig stellte auf seiner Homepage mit jQuery Round Corners ein insgesamt ziemlich ausgereiftes jQuery-Plugin zur Verfügung.

Um es nutzen zu können, benötigt man eine jQuery-Version ( die aktuelle Version 1.3(.1)  funktioniert auch! ) und Explorer-Canvas. Beide Skripte müssen zusammen mit dem roundCorner-Skript in den Dateikopf eingebunden werden.

Anschließend bettet man beispielsweise solchen Code wie $(‚#roundCorners‘).roundCorners(„25px“); ein. RoundCorners erzeugt daraus um (beziehungsweise „hinter“) das Element eine Canvas-Grafik mit runden Ecken.

Der Rahmenradius lässt sich für jede Ecke individuell angeben, zum Beispiel .roundCorners(„25px“, 0, „25px“, 0); . Die erste Angabe steht für die linke obere Ecke, weiter folgen rechts oben, rechts unten und links unten.

Angaben zu Rahmenfarbe und – dicke werden entsprechend der CSS-Formatierung des betreffenden Elements angewendet.

Das Ergebnis kann sich insgesamt in allen gängigen Browsern sehen lassen.

Was ich an dieser Umsetzung merkwürdig finde, ist die Veränderung der Element- / Rahmengröße beim Überfahren mit der Maus.

LiquidCanvas

LiquidCanvas von Steffen Rusitschka ist von der Funktionsweise her dem oben genannten RoundCorners sehr ähnlich. Auch hier wird eine Canvas-Grafik verwendet, die das betreffende Element umfasst.

Ebenfalls benötigt LC jQuery und ExCanvas als eingebundene Header-Files. Zusätzlich müssen beide LC-Dateien (liquid-canvas.js und liquid-canvas-plugins.js) eingebunden sein.

Im Gegensatz zu anderen Implementieren lässt sich der Radius der runden Ecken hier nur für alle Ecken allgemein angeben. Dafür bietet LiquidCanvas die Möglichkeit, linieare Farbverläufe als Hintergrund-Füllfarbe zu nutzen.

Ein typischer Aufruf sieht so aus: $(„#liquidCanvas“).liquidCanvas( „[fill{color:#000000} border{color:#dd0000; width:5}] => roundedRect{radius:25}“ );.

Die Farbe und Dicke der Rahmen wird hierbei in dem Aufruf selbst definiert. Das bedeutet aber wiederum, dass man etwaige vorherige Rahmenformatierungen aufheben muss. Dies geht zum Beispiel mit dem Code $(„#liquidCanvas“).css(„border-style“,“none“).

Bei LiquidCanvas fiel mir auf, dass das Skript die padding-Abstände nicht korrekt übernimmt. Hier muss im nachhinein noch Hand an die Elemente gelegt werden, um die Abstände zu korrigieren.

scale9grid

Einen gänzlich anderen Weg geht „Gordon“ mit scale9grid. Dieses orientiert sich an der traditionellen Methode zum Erstellen individueller Rahmen mittels div-Verschachtelungen.

Um scale9grid zu nutzen, benötigt man zum einen jQuery, das Plugin scale9grid und eine (größere) Rahmengrafik, die das Aussehen des zukünftigen Elementrahmens beinhaltet.

Um das betreffende Element werden acht div’s angehangen – für jede Richtung eins – und mit einem Ausschnitt der Rahmengrafikdatei beklebt.

Besonders interessant finde ich die Möglichkeit mit jQuery die Hintergrundgrafik erst kurz vor dem scale9grid-Aufruf hinzu zufügen.

Dies sieht dann beispielsweise so aus: $(‚#scale9grid‘).css(„background-image“,“url(schwarzrot.png)“).scale9Grid({top:30,bottom:30,left:30,right:30});

Die vier Parameter der Methode bestimmen die Schnittpunkte der Grafik. Der Reihe nach: Abstand von oben, von unten, von links und von rechts.

Was mich an dieser Lösung frustriert, sind die Abweichungen von Breite und padding-Angabe. Diese kann man in der Demo gut nachvollziehen.

dd_roundies

Drew Millers Projekt dd_roundies richtet sich speziell an den Internet Explorer (Version 6). Hierbei nutzt die IE-Vektoren-Auszeichnungssprache VML genutzt, um Vektorgrafiken für den IE zu erzeugen, die runde Ecken darstellen (Anmerkung: Explorer Canvas tut das selbe).

dd_roundies benötigt keine anderen (fremden) Skript-Dateien außer die eigene DD_roundies.js.

Mit der Anweisung DD_roundies.addRule(‚#dd_roundies‘, ’25px‘, true); kann beispielsweise ein 25 Pixel breiter Rahmenradius erzeugt werden. Auch hierbei können 4 verschiedene Werte (wie "10px 5px 3px 0" als zweiten Parameter) angegeben werden, um jeder Ecke einen indiviuellen Rahmenradius zuzuweisen.

Millers Skript kann jedoch nicht mit table-Elementen und textarea’s umgehen. Desweiteren gibt es aktuell noch etliche Probleme mit der Beta der 8. IE-Generation.

Für Browser, die von Haus aus Rahmenradius-Eigenschaften css-seitig ( -moz-border-radius, -webkit-border-radius oder das W3C-konforme border-radius ) unterstützen, gibt es den optionalen dritten Parameter, der diese nativen Eigenschaft nutzt.

Opera bleibt bei dieser Lösung jedoch außen vor. Zudem sehen die nativen runden Ecken im Firefox 2 sehr dürftig aus, so dass man hier andere Techniken wählen sollte.

Ansonsten erzeugt dd_roundies eine pixelgenaue Übereinstimmung zwischen Firefox 3, Webkit/Safari 3 und IE6 /7.

Auf meiner eingerichteten Demo-Seite kann jeder sich selbst ein Bild über die erzielten Ergebnisse der einzelnen Lösungen machen.

Alternative (jQuery-) Projekte, die sich auch mit runden Ecken beschäftigen:

• jQuery Curvy Corners
• jQuery BackgroundCanvas
• jQuery Corners
• CSS Multiple Backgrounds

Fazit

Die perfekte Lösung gibt es noch nicht.

Grundsätzliche bevorzuge ich, soweit es möglich ist, die nativen CSS-Eigenschaften runde Rahmen um Elemente zu erzeugen.

Für IE und Opera bietet es sich, die Projekte, die mit Canvas arbeiten, genauer anzuschauen und eines davon zu nutzen.

An dieser Stelle möchte ich eine relative unbekannte Möglichkeit zur Manipulation des Aussehens von Webseiten vorstellen, über die ich selbst erst vor wenigen Tagen gestolpert bin. Die Rede ist von DOM CSS.

In den meisten Anwendungsfällen ändert man das Erscheinungsbild von Elementen, indem man diese direkt anspricht (zum Beispiel mit getElementById(id) ) und mittels style-Attribut beeinflusst.

Mit DOM CSS ist es möglich, solche Änderungen in CSS-Regeln wie div.menu { color: black } durchzuführen. Dazu bieten alle modernen Browser Funktionen zum Entfernen bestehender und zum Erstellen neuer CSS-Regeln.

Dabei halten sich die meisten Browser-Entwickler an die W3C-Vorgaben, nur Microsofts Internet Explorer – wie so oft – nicht. Dennoch bietet der IE ähnliche Funktionen.

Grundsätzlich adressiert man zuerst das Stylesheet, das man mit Javascript beeinflussen will. Dies kann man zum Beispiel über die getElement-Methoden tun.

Das document-Object stellt mit document.styleSheets[index] eine weitere Möglichkeit zum Ansprechen von Stylesheets zur Verfügung, womit sowohl alle internen style-Elemente als auch alle externen, mit link erzeugten CSS-Definitionen erreicht werden können.

In standardkonformen Browsern greift man mit cssRules[index] auf bestehende CSS-Regeln zu, der IE reagiert nur auf die MS-eigene Methode rules[index].

Anschließend kann man mit dem style-Attribut wie gewohnt die Eigenschaftswerte verändern. Zum Beispiel:

document.styleSheets[0].cssRules[0].style.backgroundColor = "yellow";

Außerdem gibt es die Möglichkeit mittels der selectorText-Methode den Selector eines CSS-Regel auszulesen. Damit lässt eine Schleife konstruieren, die alle CSS-Regeln nach einem bestimmten Eintrag durchsucht, wie nachfolgend demonstriert:

if( document.styleSheets[0].cssRules ) {
	var myrules = document.styleSheets[0].cssRules;
} else {
	if ( document.styleSheets[0].rules ) {
		var myrules = document.styleSheets[0].rules;
	}
}

if( myrules ) {
	for( i = 0; myrules[i]; i++ ){
		if( myrules[i].selectorText == "p"){
			myrule = myrules[i];
			break;
		}
	}
}

Um neue Regeln hinzuzufügen, verwendet man in standardkonformen Browsern die insertRule[definition, index]-Methode, für den Explorer heißt die Funktion addRule[selector, style, index (optional)].

Vorhandene CSS-Definitionen löscht man mittels deleteRule[index] beziehungsweise removeRule[index (optional)] im IE.

Nachfolgend ist der komplette Code eines Mini-Beispiel zu finden. Dabei wird zuerst ein neues style-Elemente zur Laufzeit erstellt, in das HTML-Gerüst eingebettet und abschließend mittels DOM CSS eine Regel für das body-Element festgelegt, die Hintergrund- und Schriftfarbe verändert.

<br />
if( document.styleSheets ) {
	var myStyle = document.createElement("style");
	myStyle.setAttribute( "type", "text/css" );
	document.getElementsByTagName("head")[0].appendChild(myStyle);

	var styles = document.styleSheets.length;
	myStyle = document.styleSheets[styles-1];

	if( document.styleSheets[0].cssRules ) {
		myStyle.insertRule("body { color: red; background-color: black; }", 0);
	} else {
		if ( document.styleSheets[0].rules ) {
			myStyle.addRule("body", "color: red; background-color: black;");
		}
	}
}

Ich favorisiere den Weg über das Hinzufügen eines neuen style-Elements anstatt dem Bearbeiten vorhandener Definitionen, da mir dies übersichtlicher und logischer vorkommt. Zumal – in den meisten Fällen – die zuletzt festgelegte CSS-Regel bei Überschneidungen zur Darstellung vom Browser genutzt wird.

Der Vorteil gegenüber dem traditionellen Ändern von style-Attributen über das direkte Ansprechen liegt vor allem in der Geschwindigkeit bei einer großen Anzahl von Elementen, die verändert werden sollen.

Ein Browser kann erheblich schneller 1.000 Elementen eine neue Schriftfarbe über eine CSS-Regel zuweisen als in einer Schleife eben diese Elemente direkt zu adressieren und jedem die neue Schriftfarbe zuzuweisen.

Interessant ist DOM CSS daher bei Javascript-Anwendungen, die neue HTML-Elemente (für runde Ecken beispielsweise) in den Code einbinden.

Stefan Pettersson veröffentlichte in seinem Blog vor wenigen Tagen eine Raster-Bar-Demo, die an alte Amiga-Zeiten erinnert.

Um seine Querbalken darzustellen, nutzte er einzig Canvas. Mit ein wenig JavaScript hauchte er diesen durch Animation Leben ein.

Das Ergebnis ist vielleicht die alltagstaugliche Einsatzmöglichkeit für moderne Web2.0-Anwendungen, aber jedoch ein schicke Anregung für eigene Spielereien.

Steffen Rusitschka veröffentliche vor wenigen Tagen die sehr gelungene Mini-Javascriptbibliothek Liquid Canvas zum Erzeugen perfekter runder Ecken an beliebigen HTML-Elementen.

Die Rundungen werden zur Laufzeit über Canvas generiert und automatisch in den HTML-Code eingebettet. Der Einsatz von herkömmlichen Bildbearbeitungsprogrammen wie Gimp, Inkscape oder Photoshop entfällt völlig.

Die Features im Einzelnen:

• automatisches Erzeugen von HTML-Canvas-Elementen, die sich der Größe des HTML-Elements anpassen
• Canvas-Abstraktion – jedes HTML-Element erhält eine paint-Methode
• Plugins zum Rendern können verwendet werden
• etliche Plugins existieren bereits, eigene können ebenso eingebunden werden
• vereinfachte Render-Sprache für Plugin basiertes Rendern
• an CSS angelehnte Syntax der Render-Sprache für die plugin-Formatierung
• nutzt nur HTML, Canvas, jQuery und exCanvas
• funktioniert mit Firefox (2+), Internet Explorer (6+), Safari (3+), Chrome