Die inoffizielle „HTML 5.0“-Spezifikation „Web Applications 1.0“ der aus einer ganzen Reihe namhafter Mitglieder bestehenden Arbeitsgruppe WHATWG (Web Hypertext Application Technology Working Group) beschreibt ein HTML-Element <canvas>, das am ehesten als Alternative zu Flash und SVG sowie Microsofts VML verstanden werden kann. Seit Ende 2005 interpretieren die Webbrowser Firefox 1.5, Opera 9 sowie Safari 1.3 dieses proprietäre, da nicht vom W3C gebilligte Element. Hier ein erster Versuch, das Ganze anzuwenden.
Das Element <canvas> wird von Opera 9, Firefox 1.5 und Safari 1.3 interpretiert (alle gehören der WHATWG an). Opera 9 befindet sich noch in der Testphase (Stand: Januar 2006), die anderen beiden sind als stabile Versionen freigegeben worden.
Alle anderen Browser stellen als sogenannten „Fallback“ den innerhalb von <canvas> platzierten HTML-Block dar, da sie das Element nicht kennen und es ganz einfach ignorieren.
In Firefox 1.5 lassen sich Canvas-Grafiken nicht wie andere Grafiken abschalten. Auch die Funktion „Grafiken von … blockieren“ lässt sich nicht anwenden (das ist ein grundsätzliches Problem, kein Fehler des Browsers). Den Alternativtext bekommt man in diesem Browser also nie zu Gesicht. Auch mit abgeschaltetem JavaScript reagiert Firefox unsauber: Die Grafik verschwindet, der dafür vorgesehene Alternativtext innerhalb des <canvas>-Elements erscheint jedoch nicht.
In Opera 9 (Preview 2) werden Canvas-Grafiken gemeinsam mit allen anderen Grafiken abgeschaltet. Abgesehen davon reagiert Opera wie Firefox. Die Funktion „Block content“ kann nicht auf Canvas wirken, da es sich um einen URL-Filter handelt, Canvas-Grafiken jedoch keine eigene URL haben. Den Alternativtext bekommt man ebenfalls nie zu Gesicht, auch nicht mit abgeschaltetem JavaScript.
Das Element <canvas>, das als Inline-Element auftritt, lässt sich wie gewohnt mit CSS gestalten (Hintergrundfarbe, Größe etc.).
Gezeichnet wird ausschließlich über JavaScript-Methodenaufrufe wie z. B. fillRect(0, 0, 10, 10). XML-Elemente wie bei SVG gibt es nicht.
Es handelt sich um eine Pixel-, keine Vektorgrafik. Einmal gezeichnete Elemente sind fest mit der Zeichenfläche verschmolzen und lassen sich nicht wie bei SVG oder VML nachträglich modifizieren.
Das Ganze funktioniert als Zustandsmaschine, wie man es z. B. von den Canvas in Delphi kennt. Die Zustände mehrerer globaler Variablen bestimmen, mit welchen Farben, welcher Transformation etc. alle nachfolgenden Objekte zu zeichnen sind. Die Objekte definieren sich dann nur noch durch ihre Form.
Als Maßeinheit innerhalb des Canvas-Bitmaps kommen ausschließlich Pixel zum Einsatz. Die Spezifikation erlaubt allerdings nachträgliche Größenänderungen, z. B. per CSS, so dass ein Canvas-Pixel nicht unbedingt einem Bildschirmpixel entsprechen muss. Die Skalierung soll (hier ist die Spezifikation etwas schwammig) wie bei einer Vektorgrafik ohne Qualitätsverlust stattfinden. In den vorliegenden Version der Browser lässt sich das jedoch nicht nachvollziehen. Sowohl in Firefox als auch in Opera lässt sich die Grafik mittels CSS in der Größe verändern, allerdings mit Qualitätsverlust (Treppcheneffekt). Die in Opera 9 Preview 1 noch fehlerhafte Zoomfunktion wurde mit Preview 2 korrigiert: Sie skaliert Canvas-Grafiken sauber mit allen anderen Grafiken.
Das Schreiben von Text auf die Canvas-Fläche ist in der momentanen Version der Spezifikation nicht vorgesehen. Allerdings lassen sich Canvas-Grafiken nach Belieben transparent gestalten (mit echter Alpha-Transparenz sowie einer ganzen Reihe Verknüpfungsoperatoren wie lighter, xor usw.) und per CSS über HTML-Elemente positionieren.
Flächen (in Opera nur solide Flächen) werden mit geglätteten Kanten gezeichnet („Anti-Aliasing“).
Das fertige Bild lässt sich mit der Methode toDataURL() im PNG-Format exportieren. Eine Ablage auf dem lokalen Datenträgern unterliegt natürlich den normalen Einschränkungen von JavaScript, ist also nicht möglich. Das Bitmap lässt sich so jedoch als Quelle an andere Elemente der Seite übergeben.