Erstellen von HTML5-Anwendungen

Verwenden einer HTML5-Canvas für die Datenvisualisierung

Brandon Satrom

Als das Internet, oder das Web, noch in den Kinderschuhen steckte und im Prinzip nur aus einer Sammlung statischer Texte und Links bestand, hat sich das Interesse an der Unterstützung für andere Arten von Inhalten entwickelt. Marc Andreessen, Entwickler des Mosaic-Browsers, der sich später zu Netscape Navigator entwickelte, machte 1993 den Vorschlag, für die Inlineeinbettung von Bildern zusammen mit Text auf einer Seite standardmäßig das IMG-Tag zu verwenden. Kurz darauf wurde das IMG-Tag zum Standardtag, wenn es darum ging, grafische Ressourcen auf Webseiten hinzuzufügen. Diese Praxis ist auch heute noch gültig. Man könnte sogar argumentieren, dass das IMG-Tag immer wichtiger wird, nun da das Web nicht mehr nur auf Dokumenten, sondern hauptsächlich auf Anwendungen basiert.

Medien im Allgemeinen haben auf jeden Fall eine größere Bedeutung als je zuvor, und obwohl sich der Bedarf an Medien im Web im Laufe der letzten 18 Jahre vergrößert hat, ist das Bild an sich statisch geblieben. Webautoren setzen mehr und mehr dynamische Medien wie Audio- bzw. Videoinhalte und interaktive Animationen auf ihren Sites und in ihren Anwendungen ein, und bis vor Kurzem war die Standardlösung ein Plug-In wie Flash oder Silverlight.

Und nun mit HTML5 ist für Medienelemente in Browsern der nächste Schritt angesagt. Sie haben wahrscheinlich schon von den neuen Audio- und Videotags gehört, mit denen diese Arten von Inhalten ganz selbständig ohne Plug-Ins funktionieren. Nächsten Monat werden diese beiden Elemente und ihre APIs in einem Artikel näher behandelt. Ihnen ist bestimmt auch schon das Canvas-Element untergekommen, eine Zeichnungsoberfläche voller funktionsträchtiger JavaScript-APIs, mit denen Sie Bilder und Animationen im Handumdrehen erstellen und bearbeiten können. Die Bedeutung, die IMG für statische Grafikinhalte hatte, besitzt Canvas möglicherweise für dynamische und skriptfähige Inhalte.

Doch so aufregend das Canvas-Element auch sein mag, sein Ruf wird ihm nicht gerecht. Aufgrund seiner Leistungsfähigkeit wird das Canvas-Element meist im Rahmen komplexer Animationen oder Spiele vorgestellt. Dabei sieht man natürlich, was eine Canvas so alles kann, aber aus diesem Grund können Benutzer den Eindruck erhalten, dass die Arbeit mit der Canvas kompliziert und schwierig sei und dass sich die Verwendung nur für komplexe Fälle wie Animationen oder Spiele lohne.

Im Artikel in diesem Monat möchte ich vom Glanz und Glamour der Canvas Abstand nehmen und Ihnen einfache, grundlegende Verwendungsmöglichkeiten zeigen. Ich möchte erreichen, dass Sie Canvas-Elemente als eine leistungsstarke Option für die Datenvisualisierung in Ihre Anwendungen integrieren können. Vor diesem Hintergrund werde ich die ersten Schritte mit dem Canvas-Element erläutern und Ihnen zeigen, wie Sie einfache Linien, Formen und Textelemente erstellen. Anschließend erkläre ich, wie Sie Farbverläufe in Formen einsetzen und wie Sie externe Bilder in einer Canvas hinzufügen. Den Abschluss bildet, wie Sie das von meinen Artikeln in dieser Reihe gewöhnt sind, eine kurze Erläuterung zur Polyfillunterstützung von Canvas-Elementen für ältere Browser.

Einführung der HTML5-Canvas

Laut der W3C HTML5-Spezifikation (w3.org/TR/html5/the-canvas-element.html) stellt das Canvas-Element einen von der Auflösung abhängigen Bitmaphintergrund für Skripts bereit. Dieser kann dann zum schnellen Rendern von Grafiken (auch in spielegeeigneter Qualität) oder anderen visuellen Elementen verwendet werden. Die Canvas ist sogar in zwei W3C-Spezifikationen definiert. Bei der ersten Spezifikation handelt es sich um einen Teil der HTML5-Kernspezifikation, in dem das Element an sich im Detail definiert wird. In dieser Spezifikation wird angegeben, wie das Canvas-Element verwendet wird und wie man auf den entsprechenden Zeichenkontext zugreift. Außerdem werden APIs zum Exportieren von Canvas-Inhalten und Sicherheitsüberlegungen für Browseranbieter erörtert. Die zweite Spezifikation ist der Canvas 2D-Kontext für HTML (w3.org/TR/2dcontext), auf den gleich noch eingegangen wird.

Der Einstieg in die Verwendung einer Canvas ist ganz einfach, zum Beispiel kann man einfach ein <canvas>-Element in HTML5-Markup hinzufügen:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <title>My Canvas Demo </title>               
        <link rel="stylesheet" href="style.css" />
      </head>
      <body>
        <canvas id="chart" width="600" height="450"></canvas>       
      </body>
    </html>

Nun habe ich zwar ein Canvas-Eleme­­nt im DOM, aber durch das Einfügen des Markups auf der Seite ist nichts weiter passiert, da das Canvas-Element erst dann einen Inhalt bekommt, wenn dieser hinzugefügt wird. Hier kommt der Zeichenkontext zum Tragen. Ich kann Ihnen mithilfe von CSS-Formatvorlagen zeigen, wo sich meine leere Canvas, also meine „Leinwand“ befindet, daher füge ich eine gepunktete blaue Linie um das leere Element hinzu.

    canvas {
        border-width: 5px;
        border-style: dashed;
        border-color: rgba(20, 126, 239, 0.50)
    }

Wenn meine Seite in Internet Explorer 9+, Chrome, Firefox, Opera oder Safari geöffnet wird, ist das in Abbildung 1 dargestellte Ergebnis zu sehen.

Abbildung 1 – Ein leeres, formatiertes Canvas-Element

Bei Verwendung einer Canvas läuft der Großteil der Arbeit über JavaScript ab, wo die bereitgestellten APIs des Canvas-Zeichenkontexts genutzt werden können, um die einzelnen Pixel auf der Oberfläche zu bearbeiten. Um den Canvas-Zeichenkontext zu erhalten, müssen Sie das Canvas-Element aus dem DOM abrufen und dann die getContext-Methode für dieses Element aufrufen.

var _canvas = document.getElementById('chart');
var _ctx = _canvas.getContext("2d");

GetContext gibt ein Objekt mit einer API zurück, die Sie zum Zeichnen auf der betreffenden Canvas verwenden können. Das erste Argument für diese Methode (in diesem Fall 2D) gibt die Zeichnungs-API an, die für die Canvas verwendet werden soll. 2D bezieht sich auf den zuvor erwähnten Canvas 2D-Kontext für HTML. Wie der Name schon sagt bedeutet 2D, dass es sich um einen zweidimensionalen Zeichenkontext handelt. Zu dem Zeitpunkt, da dies geschrieben wird, ist der 2D-Kontext der einzige gängige Zeichenkontext, und den verwende ich in diesem Artikel. Ein 3D-Zeichenkontext ist in Arbeit, daher wird die Canvas unsere Anwendungen in Zukunft bestimmt noch leistungsfähiger machen.

Zeichnen von Linien, Formen und Text

Nun enthält unsere Seite ein Canvas-Element, und wir haben den Zeichenkontext in JavaScript abgerufen. Also können wir jetzt Inhalte hinzufügen. Da ich mich auf die Datenvisualisierung konzentriere, zeichne ich ein Balkendiagramm auf der Canvas. In diesem Diagramm werden die Verkaufsdaten des aktuellen Monats für ein fiktives Sportgeschäft dargestellt. Im Rahmen dieser Übung müssen Linien für die Achsen gezeichnet werden, Formen und Füllungen für die Balken sowie Text für die Beschriftungen der einzelnen Achsen und Balken.

Fangen wir mit den Linien für die X- und die Y-Achse an. Das Zeichnen von Linien (bzw. Pfaden) unter Verwendung des Canvas-Kontexts besteht aus zwei Schritten. Zuerst verfolgen Sie die Linien auf der Oberfläche nach. Dazu werden verschiedene lineTo(x, y)- und moveTo(x, y)-Aufrufe verwendet. Alle Methoden erfordern X- und Y-Koordinaten für das Canvas-Objekt (angefangen in der Ecke oben links), die beim Ausführen des Vorgangs verwendet werden (im Gegensatz zu Koordinaten auf dem Bildschirm). Mit der moveTo-Methode springt man zu den angegebenen Koordinaten, und mit lineTo wird eine Linie von den aktuellen Koordinaten zu den angegebenen Koordinaten nachverfolgt. Mit dem folgenden Code wird beispielsweise unsere Y-Achse auf der Oberfläche nachverfolgt:

// Draw y axis.
_ctx.moveTo(110, 5);
_ctx.lineTo(110, 375);

Wenn Sie dieses Codebeispiel in Ihr Skript aufnehmen und es im Browser ausführen, werden Sie feststellen, dass nichts passiert. Da es sich beim ersten Schritt lediglich um die Ablaufverfolgung handelt, wird noch nichts auf dem Bildschirm gezeichnet. Bei der Ablaufverfolgung wird der Browser lediglich angewiesen, einen Pfad zur Kenntnis zu nehmen, der irgendwann in der Zukunft auf den Bildschirm übertragen wird. Wenn ich möchte, dass Pfade auf dem Bildschirm gezeichnet werden, kann ich die strokeStyle-Eigenschaft für meinen Kontext festlegen und dann die stroke-Methode aufrufen, wodurch die unsichtbaren Linien gefüllt werden. Das Ergebnis ist in Abbildung 2 dargestellt.

 

// Define Style and stroke lines.
_ctx.strokeStyle = "#000";
_ctx.stroke();

Abbildung 2 – Eine einfache Linie auf der Canvas

Da Definitionslinien (lineTo, moveTo) und Zeichnungslinien (stroke) voneinander unabhängig sind, können Sie mehrere lineTo- und moveTo-Vorgänge stapelweise verarbeiten und sie dann gleichzeitig auf dem Bildschirm ausgeben. Das mache ich für die X- und die Y-Achse und für die Vorgänge, mit denen jeder Achse eine Pfeilspitze hinzugefügt wird. Die vollständige Funktion zum Zeichnen der Achsen ist in Abbildung 3 angegeben, und das Ergebnis ist in Abbildung 4 zu sehen.

Abbildung 3 – drawAxes-Funktion

function drawAxes(baseX, baseY, chartWidth) {
   var leftY, rightX;
   leftY = 5;
   rightX = baseX + chartWidth;
   // Draw y axis.
   _ctx.moveTo(baseX, leftY);
   _ctx.lineTo(baseX, baseY);
   // Draw arrow for y axis.
   _ctx.moveTo(baseX, leftY);
   _ctx.lineTo(baseX + 5, leftY + 5);
   _ctx.moveTo(baseX, leftY);
   _ctx.lineTo(baseX - 5, leftY + 5);
   // Draw x axis.
   _ctx.moveTo(baseX, baseY);
   _ctx.lineTo(rightX, baseY);
   // Draw arrow for x axis.
   _ctx.moveTo(rightX, baseY);
   _ctx.lineTo(rightX - 5, baseY + 5);
   _ctx.moveTo(rightX, baseY);
   _ctx.lineTo(rightX - 5, baseY - 5);
   // Define style and stroke lines.
   _ctx.strokeStyle = "#000";
   _ctx.stroke();
}

Abbildung 4 – Fertige X-Achse und Y-Achse

Unsere Achsen sind nun fertig, aber wir sollten sie noch beschriften. Im Canvas 2D-Kontext sind APIs angegeben, mit denen Text zu Canvas-Elementen hinzugefügt werden kann, daher müssen Sie sich nicht mit umständlichen Bearbeitungsmethoden wie Fließtext über einem Canvas-Element abgeben. Allerdings stellt Canvas-Text kein Boxmodell zur Verfügung, und es werden auch keine CSS-Formatvorlagen für Text auf Seitenbreite u. Ä. akzeptiert. In der API ist ein Schriftartattribut enthalten, das wie eine CSS-Schriftartregel funktioniert. Außerdem enthält sie die Eigenschaften textAlign und textBaseline, mit denen Sie die Position in Bezug auf die angegebenen Koordinaten zu einem gewissen Grad bestimmen können. Aber abgesehen davon müssen Sie, um Text auf der Canvas zu zeichnen, den genauen Punkt für den bereitgestellten Text auf der Canvas auswählen.

Die X-Achse steht für die Produkte in unserem fiktiven Sportgeschäft, also müssen wir die Achse entsprechend beschriften:

var height, widthOffset;
height = _ctx.canvas.height;
widthOffset = _ctx.canvas.width/2;
_ctx.font = "bold 18px sans-serif";
_ctx.fillText("Product", widthOffset, height - 20);

In diesem Codeausschnitt lege ich die optionale Schriftarteigenschaft (font) fest und gebe eine Zeichenfolge an, die auf der Oberfläche gezeichnet werden soll. Außerdem definiere ich die X- und Y-Koordinaten für die Ausgangsposition der Zeichenfolge. Bei diesem Beispiel zeichne ich das Wort „Product“ in die Mitte meiner Canvas, 20 Pixel über dem unteren Rand, sodass in meinem Balkendiagramm genug Platz für die Beschriftungen der einzelnen Produkte bleibt. Und bei der Beschriftung der Y-Achse, die die Verkaufsdaten für die einzelnen Produkte enthält, gehe ich ähnlich vor. Das Ergebnis ist in Abbildung 5 dargestellt.

Abbildung 5 – Canvas mit Text

Jetzt besitzt unser Diagramm einen Rahmen, und wir können die Balken hinzufügen. Wir legen ein paar fiktive Verkaufsdaten für das Balkendiagramm an, die ich als JavaScript-Array mit Objektliteralen definiere.

var salesData = [{
   category: "Basketballs",
   sales: 150
}, {
   category: "Baseballs",
   sales: 125
}, {
   category: "Footballs",
   sales: 300
}];

Mit diesen Daten können wir unsere Balken im Diagramm zeichnen. Dazu verwenden wir fillRect und fillStyle.

Mit fillRect(x, y, width, height) wird auf der Canvas ein Rechteck entlang den X- und Y-Koordinaten mit der angegebenen Breite und Höhe gezeichnet. Es ist zu beachten, dass fillRect Formen von der linken oberen Ecke ausgehend zeichnet, außer wenn Sie negative Werte für die Höhe und Breite angeben, da die Füllung in diesem Fall in umgekehrter Richtung ausstrahlt. Für Zeichenaufgaben wie beim Anlegen von Diagrammen, bedeutet dies, dass die Balken von oben nach unten gezeichnet werden und nicht von unten nach oben.

Um die Balken zu zeichnen, können wir für das Array der Verkaufsdaten eine Schleife anlegen und fillRect mit den entsprechenden Koordinaten aufrufen:

var i, length, category, sales;
var barWidth = 80;
var xPos = baseX + 30;
var baseY = 375;       
for (i = 0, length = salesData.length; i < length; i++) {
   category = salesData[i].category;
   sales = salesData[i].sales;
   _ctx.fillRect(xPos, baseY - sales-1, barWidth, sales);
   xPos += 125;
}

In diesem Codebeispiel wird die standardmäßige Balkenbreite verwendet, während die Höhe von der sales-Eigenschaft der einzelnen Produkte im Array abhängt. Das Ergebnis dieses Codes wird in Abbildung 6 gezeigt.

Abbildung 6 – Rechtecke als Balkendiagrammdaten

Nun ist unser Balkendiagramm technisch korrekt, aber diese schwarz gefüllten Balken könnten ansprechender aussehen. Gestalten wir sie also ein bisschen bunter mit Farbverlauf.

Arbeiten mit Farben und Farbverlauf

Wenn die fillRect-Methode eines Zeichenkontexts aufgerufen wird, wird im Kontext die aktuelle fillStyle-Eigenschaft verwendet, um das Rechteck während des Zeichenvorgangs zu gestalten. Die Standardformatvorlage ist schwarz gefüllt, weshalb unser Diagramm so aussieht wie in Abbildung 6. Für fillStyle können Farben als benannte, Hexadezimal- und RGB-Werte angegeben werden, also fügen wir den einzelnen Balken ein paar Funktionen hinzu, bevor sie gezeichnet werden:

// Colors can be named hex or RGB.
colors = ["orange", "#0092bf", "rgba(240, 101, 41, 0.90)"];       
...
_ctx.fillStyle = colors[i % length];
_ctx.fillRect(xPos, baseY - sales-1, barWidth, sales);

Zunächst erstellen wir ein Farbarray. Dann verwenden wir bei den Schleifen für die einzelnen Produkte jeweils eine dieser Farben als Füllformat für das entsprechende Element. Das Ergebnis ist in Abbildung 7 dargestellt.

Abbildung 7 – Verwenden von „fillStyle“ zum Gestalten von Formen

Das sieht schon besser aus, aber fillStyle ist sehr flexibel, sodass Sie zum Beispiel einen linearen oder radialen Farbverlauf an Stelle einer Volltonfarbe verwenden können. Der 2D-Zeichenkontext gibt zwei Farbverlaufsfunktionen an, createLinerGradient und createRadialGradient. Beide können Ihre Formen mit reibungslosen Farbübergängen verschönern.

In diesem Beispiel definiere ich eine createGradient-Funktion, die die X- und Y-Koordinaten für den Farbverlauf übernimmt, eine Breite und die zu verwendende Grundfarbe:

function createGradient(x, y, width, color) {
   var gradient;
   gradient = _ctx.createLinearGradient(x, y, x+width, y);
   gradient.addColorStop(0, color);
   gradient.addColorStop(1, "#efe3e3");
   return gradient;
}

Nachdem ich createLinearGradient mit meinen Anfangs- und Endkoordinaten aufgerufen habe, füge ich dem vom Zeichenkontext zurückgegebenen Farbverlaufsobjekt Farbmarkierungen hinzu. Mit der addColorStop-Methode werden Farbübergänge entlang des Farbverlaufs hinzugefügt. Diese Methode kann beliebig oft aufgerufen werden, wobei die ersten Parameterwerte zwischen 0 und 1 liegen müssen. Wenn ich meinen Farbverlauf eingerichtet habe, lasse ich ihn über die Funktion zurückgeben.

Das Farbverlaufsobjekt kann dann als fillStyle-Eigenschaft für meinen Kontext festgelegt werden (an Stelle der Hexadezimal- und RGB-Werte aus dem vorherigen Beispiel). Ich verwende dieselben Farben als Ausgangspunkt und blende sie zu Hellgrau aus.

colors = ["orange", "#0092bf", "rgba(240, 101, 41, 0.90)"];
_ctx.fillStyle = createGradient(xPos, baseY - sales-1, barWidth, colors[i % length]);
_ctx.fillRect(xPos, baseY - sales-1, barWidth, sales);

Das Ergebnis der Farbverlaufsoption ist in Abbildung 8 zu sehen.

Abbildung 8 – Verwenden von Farbverläufen bei einer Canvas

Arbeiten mit Bildern

Unser Diagramm sieht jetzt ziemlich gut aus, und wir konnten es im Browser mit ein paar Dutzend JavaScript-Zeilen rendern. Ich könnte theoretisch hier aufhören, aber ich möchte noch auf eine weitere grundlegende Canvas-API eingehen, die für die Arbeit mit Bildern relevant ist. Mit dem Canvas-Element können Sie nicht nur statische Bilder durch skriptbasierte und interaktive Inhalte ersetzen, sondern Sie können Ihre Canvas-Darstellungen auch mit statischen Bildern verschönern.

In dieser Demo verwende ich Bilder als Balken im Diagramm. Und zwar nicht irgendwelche Bilder, sondern Bilder der entsprechenden Artikel. Aus diesem Grund besitzt meine Website einen Ordner mit JPG-Bildern für die verschiedenen Produkte, in diesem Fall basketballs.jpg, baseballs.jpg und footballs.jpg. Ich muss lediglich die Position und Größe für die einzelnen Bilder festlegen.

Der 2D-Zeichenkontext definiert eine drawImage-Methode mit drei Überladungen, und es können drei, fünf oder neun Parameter angegeben werden. Der erste Parameter ist immer das Bild des DOM-Elements, das gezeichnet werden soll. Für die einfachste Version von drawImage können auch X- und Y-Koordinaten für die Canvas angegeben werden, dann wird das Bild so wie es ist an dieser Stelle gezeichnet. Sie können auch Werte für die Höhe und Breite als die beiden letzten Parameter angeben, dadurch wird das Bild auf die entsprechende Größe skaliert, bevor es auf die Oberfläche gezeichnet wird. Und über die komplexeste Verwendungsmöglichkeit der drawImage-Methode können Sie ein Bild auf ein definiertes Rechteck zuschneiden, auf bestimmte Abmessungen skalieren und es anhand der angegebenen Koordinaten auf die Canvas zeichnen lassen.

Da es sich bei meinen Quellbildern um großformatige Bilder handelt, die an anderer Stelle auf meiner Website verwendet werden, habe ich mich für den letzteren Ansatz entschieden. In diesem Beispiel erstelle ich, anstatt in meiner Schleife des salesData-Arrays fillRect für die einzelnen Artikel aufzurufen, ein DOM-Bildelement, als dessen Quelle ich eins meiner Produktbilder festlege. Dann rendere ich eine zugeschnittene Version dieses Bilds in mein Diagramm (siehe Abbildung 9).

Abbildung 9 – Zeichnen von Bildern auf einer Canvas

// Set outside of my loop.
xPos = 110 + 30;     
// Create an image DOM element.
img = new Image();
img.onload = (function(height, base, currentImage, currentCategory) {
  return function() {
    var yPos, barWidth, xPos;
    barWidth = 80;
      yPos = base - height - 1;
    _ctx.drawImage(currentImage, 30, 30, barWidth, height, xPos, yPos,
      barWidth, height);
      xPos += 125;           
  }
})(salesData[i].sales, baseY, img, salesData[i].category);
img.src = "images/" + salesData[i].category + ".jpg";

Da ich diese Bilder dynamisch erstelle und sie nicht zur Entwurfszeit meinem Markup manuell hinzufüge, kann ich nicht davon ausgehen, dass ich einfach die Bildquelle festlegen und dann dieses Bild sofort auf meine Canvas zeichnen kann. Um sicherzustellen, dass jedes Bild erst dann gezeichnet wird, wenn es vollständig geladen wurde, füge ich dem onload-Ereignis meine Zeichnungslogik hinzu und umschließe diesen Code dann mit einer selbstaufrufenden Funktion. Dadurch wird ein Closure erstellt, wobei Variablen auf die richtige Produktkategorie verweisen – Verkaufs- und Positionsvariablen. Das Ergebnis ist in Abbildung 10 zu sehen.

Abbildung 10 – Verwenden von Bildern auf einer Canvas

Verwenden der Polyfillfunktionalität für eine Canvas

Sie wissen vielleicht, dass das Canvas-Element in Internet Explorer erst seit Version 9 unterstützt wird und auch in älteren Versionen anderer Browser nicht unterstützt wird. Sie können das leicht nachprüfen, indem Sie das Demoprojekt in Internet Explorer öffnen und durch Drücken der F12-TASTE die Entwicklertools aufrufen. Über die mit F12 aufgerufenen Tools können Sie als Browsermodus Internet Explorer 8 oder Internet Explorer 7 festlegen. Aktualisieren Sie dann die Seite. Wahrscheinlich wird dann eine JavaScript-Ausnahme mit der Meldung „Das Objekt unterstützt die Eigenschaft oder Methode 'getContext' nicht“ angezeigt. Weder der 2D-Zeichenkontext noch das Canvas-Element sind verfügbar. Man muss außerdem wissen, dass das Canvas-Element auch in Internet Explorer 9 nur dann zur Verfügung steht, wenn Sie eine DOCTYPE-Direktive angeben. Wie ich bereits im ersten Artikel dieser Reihe (msdn.microsoft.com/magazine/hh335062) erwähnt habe, empfiehlt es sich immer, <!DOCTYPE html> oben auf jeder HTML-Seite anzugeben, damit sichergestellt wird, dass die neuesten Features im Browser zur Verfügung stehen.

Um die Darstellung für Benutzer zu ermöglichen, deren Browser keine Canvas-Unterstützung bieten, verwenden Sie am einfachsten ein Ausweichelement wie ein Bild oder Text. Um beispielsweise Benutzern ein Ausweichelement anzuzeigen, können Sie ein Markup der folgenden Art verwenden:

    <canvas id=”chart”>
      <img id=”chartIMG” src=”images/fallback.png”/>
    </canvas>

Im <canvas>-Tag platzierte Inhalte werden nur gerendert, wenn der Browser des Benutzers keine Canvasunterstützung bietet. Daher können Sie in der Canvas Bilder oder Text als einfache Ausweichlösungen platzieren, die keine Prüfungen erfordern.

Falls Sie Ihre Ausweichunterstützung noch einen Schritt weiter führen möchten, gibt es eine Vielzahl an Polyfilllösungen für Canvas-Elemente, sodass Sie Canvas-Lösungen problemlos auch für ältere Browserversionen verwenden können, sofern Sie potenzielle Lösungen sorgfältig prüfen und sich über die Einschränkungen der einzelnen Polyfillfunktionalitäten im Klaren sind. Wie ich bereits in anderen Artikeln dieser Reihe erwähnt habe, sollten Sie als Ausgangspunkt für die Suche nach geeigneten Polyfillfunktionalitäten in Bezug auf HTML5-Technologie die Seite „HTML5 Cross Browser Polyfills“ im Modernizr-Wiki von GitHub (bit.ly/nZW85d) verwenden. Zu dem Zeitpunkt, da dies geschrieben wird, stehen verschiedene Canvas-Polyfills zur Verfügung, unter anderem zwei auf Flash- und Silverlight-Basis.

 Im Demoprojekt, das für diesen Artikel zum Download verfügbar ist, habe ich explorercanvas verwendet (code.google.com/p/explorercanvas), um unter Verwendung von in Internet Explorer unterstütztem VML (Vector Markup Language) mit Canvas-Funktionalität vergleichbare Lösungen zu erstellen, und canvas-text (code.google.com/p/canvas-text), um zusätzliche Unterstützung zum Rendern von Text in älteren Browsern hinzuzufügen.

Wie in früheren Artikeln erläutert wurde, können Sie mit Modernizr die Funktionserkennung für canvas (und canvastext) in Browsern unterstützen, indem bei Bedarf Modernizr.canvas aufgerufen und dann explorercanvas mithilfe von Modernizr.load asynchron geladen wird. Weitere Informationen finden Sie unter modernizr.com.

Wenn Ihnen Modernizr nicht zusagt, gibt es noch einen anderen Weg, um explorercanvas für ältere Versionen von IE bedingungsabhängig hinzuzufügen, und zwar mit bedingten Kommentaren.

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

Wenn Internet Explorer 8 oder Vorgängerversionen einen derart formatierten Kommentar erkennen, wird der Block als if-Anweisung samt explorercanvas- und canvas-text-Skriptdateien ausgeführt. Andere Browser, zum Beispiel Internet Explorer 10, behandeln den gesamten Block als Kommentar und ignorieren ihn.

Wenn Sie ein potenzielles Polyfill für Ihre Anwendung in Betracht ziehen, müssen Sie unter anderem beachten, inwiefern das Polyfill den 2D-Zeichenkontext unterstützt. Nur wenige Polyfills bieten vollständige Unterstützung für jede Anwendungsmöglichkeit, aber die meisten können die grundlegenden Szenarien bewältigen, die in diesem Artikel besprochen wurden.

Ich konnte leider hier nicht auf alle Aspekte eingehen, dabei kann man mit Canvas-Elementen noch wesentlich mehr erreichen: zum Beispiel auf Klick- und andere Ereignisse reagieren, Canvas-Daten ändern, die Zeichnungsoberfläche animieren, Bilder pixelweise rendern und bearbeiten, den Status speichern und die gesamte Oberfläche als Bild exportieren. Es gibt sogar ganze Bücher zum Thema Canvas. Um die Leistung von Canvas-Lösungen zu nutzen, muss man kein Spieleprogrammierer sein. Davon habe ich Sie hoffentlich im Rahmen dieses Artikels überzeugen können. Ich kann Ihnen nur empfehlen, sich die Spezifikationen näher anzusehen und sich vorbehaltlos mit dieser aufregenden neuen Grafiktechnologie zu beschäftigen.

Weitere Informationen zur Canvas-Unterstützung in Internet Explorer 9 finden Sie online im Entwicklerhandbuch zu IE9 (msdn.microsoft.com/ie/ff468705). Auch die Canvas Pad-Demos, die auf der IE-Testseite (bit.ly/9v2zv5) verfügbar sind, lohnen sich! Eine Liste mit einigen anderen browser-unabhängigen Polyfills für Canvas-Elemente finden Sie in der vollständigen Polyfillliste unter (bit.ly/eBMoLW).

Und ein Wort zum Abschluss: Alle Demos für diesen Artikel, die online zur Verfügung stehen, wurden mithilfe von WebMatrix erstellt, einem kostenlosen, kompakten Webentwicklungstool von Microsoft. Sie können WebMatrix unter aka.ms/webm selbst ausprobieren.

Brandon Satrom arbeitet als Developer Evangelist für Microsoft in der Nähe von Austin. Er veröffentlicht Blogs unter userinexperience.com, und Sie können ihm auf Twitter unter twitter.com/BrandonSatrom folgen.

Unser Dank gilt den folgenden technischen Experten für die Durchsicht dieses Artikels: Jatinder Mann und Clark Sell.