Webkrauts

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Malen nach Zahlen

Mit dem neuen HTML5-Element <canvas> gesellt sich eine experimentelle Spielwiese zum Markup. Per JavaScript lassen sich Grafiken auf die Webseite zeichnen. Wie das geht und was es bringen kann, beschreibt Olaf Gleba.

Das Element canvas ist sicherlich eines der am interessantesten neuen Elemente der Spezifikation und durch seine vielfältigen Anwendungsbereiche zugleich auch eines der komplexesten. Ehemals eingeführt von Apple und in Safari und MacOS X integriert, hat es schon bald in Gecko-basierten Browsern und dem aktuellen Google-Browser Chrome Einzug gehalten.

Das Element ermöglicht Zeichenoperationen, mit Hilfe derer wir (fast) beliebige geometrische Formen und Pfade zeichnen können. Dies ermöglicht beispielsweise die Erstellung von Charts und/oder Diagrammen, die durch dynamische Werteangaben beim Laden einer Seite unmittelbar erstellt werden. Zum anderen bietet das Element umfangreiche Möglichkeiten zur Komposition, Animation und Manipulation von Bilder und Grafiken und auch Filmen.

Sozusagen zum Leben erweckt wird das initial leere Element durch die DOM Methoden, die das Element in großer Anzahl bereitstellt. Diese sind über eine Script-Schnittstelle (Javascript) ansprechbar.

Die Komplexität der Anwendungsmöglichkeiten bedingt es dann auch, dass in diesem Artikel nur grundlegende Beispiele beschrieben werden und am Ende auf lesens- und sehenswerte Seiten verwiesen wird.

Browser-Unterstützung

Alle Browser mit mind. Gecko 1.8 Engine (Firefox ab 1.5), Safari ab 3.x, Opera ab 9.x und der aktuelle Google-Browser Chrome unterstützen das canvas Element. Der Internet Explorer interpretiert das Element noch nicht. Über eine Javascript Lösung kann man dem IE hier Beine machen.

Einbindung

Quelltext: Einbindung des Element canvas

<canvas id="sample" width="290" height="150">
  Ihr Browser unterstützt das Element
    <code>canvas</code> nicht.
</canvas>

Das Element¹ hat lediglich zwei optionale Attribute (width, height). Werden diese nicht gesetzt, wird es mit einer Weite von 300 Pixel und einer Höhe von 150 Pixel initialisiert. Die Definition des globalen Attributes id ist diesem Zusammenhang sinnvoll, um das Element in einem Scriptkontext gezielt ansprechen zu können.

Das Element canvas kann über CSS gestylt werden. Die Deklarationen beziehen sich dabei alleine auf den Element-Container. Die innerhalb des Elementes ausgeführten Operationen bleiben hiervon unberührt. In seinem Standardzustand wird das Element transparent angezeigt.

Wie bei den Elementen video und audio wird ein Fallback unterstützt. Ist einem Browser das Element unbekannt, wird der innerhalb des Start- und End-Tag liegende Inhalt angezeigt. Unterstützt der Browser das Element, wird der alternative Inhalt ignoriert und die Operationen innerhalb des Elementes werden ausgeführt.

Raster und Koordinatensystem

Bevor wir anfangen, uns konkreten Beispielen zuzuwenden, ein paar Worte zum Raster, auf das sich sämtliche Koordinaten unserer späteren Anwendungen beziehen.

Bild: Grafische Darstellung des Rasters/Koordinatensystems

Ausgangspunkt der Positionierung aller Elementen ist immer die obere linke Ecke des Rasters (0,0). So beschreibt X immer den Abstand zum linken, Y den zum oberen Rand des Rasters. Da dies für einige Anwendungen nicht wirklich ausreichend ist, gehe ich zu einem späteren Zeitpunkt auf die Möglichkeit ein, diese relative Fixierung zu umgehen.

Formen und Pfade

Das canvas Element stellt eine oder mehrere pixelbasierte Zeichenebenen bereit, die in einem drei- oder zweidimensionalen Kontext gerendert werden. Hiermit ist es unter anderen möglich, Tabellen und Diagramme dynamisiert zu zeichnen, aber auch einfache Animationen zu erstellen. Aufgrund einer bislang nicht eindeutigen Spezifikation der Schnittstelle für den 3D Kontext, konzentriere ich mich im folgenden auf die Möglichkeiten der zweidimensionalen Darstellung.

Quelltext: Initialisieren des Elementes canvas im Script-Kontext

<script>
var canvas = document.getElementById('sample');
var ctx = canvas.getContext('2d');
}
</script>

Um Operationen auszuführen, muss in einem ersten Schritt über die bereitgestellten DOM Methode getContext() des Elementes canvas der Darstellungskontext definiert werden. Die genannte DOM Methode benötigt als Paramenter den Typ des Darstellungkontextes. Hier setzen wir das Definitionskürzel für den zweidimensionalen Kontext ein.

Rechtecke

canvas unterstützt  – im Gegensatz zu SVG  – nur das Rechteck als unmittelbar zu zeichnende Form. Um daraus ableitende geometrische Formen zu ermöglichen wie Kreise, Dreiecke und komplexe Kombinationen aus beiden, müssen Pfade kombiniert werden. Hierzu weiter unten im Artikel mehr.

Rechtecke werden über folgende DOM Methoden des Elementes canvas erstellt:

Quelltext Beispiel 1: Rechtecke zeichnen

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function zeichne() {
  var canvas = document.getElementById('sample');
  if (canvas.getContext) {
  var ctx = canvas.getContext('2d');

    ctx.fillStyle = "rgba(30,144,255,0.5)";
    ctx.fillRect (10, 10, 120, 120);

    ctx.fillStyle = "rgba(30,144,255,0.7)";
    ctx.fillRect (70, 30, 120, 120);

    ctx.fillStyle = "#1E90FF";
    ctx.fillRect(230, 10, 120, 120);
    ctx.clearRect(250, 30, 80, 80);
    ctx.strokeRect(255, 35, 70, 70);
  }
}
</script>
</head>

<body onload="zeichne();">

<canvas id="sample" width="460" height="150">
  Ihr Browser unterstützt das Element
  <code>canvas</code> nicht.
</canvas>

</body>
</html>

Beispiel 1: Rechtecke zeichnen

Für die Beispiele des Artikels nutzen wir im head einen Script-Tag. Dort legen wir eine Funktion zeichne() an und überprüfen als Erstes, ob das Element canvas dem Browser bekannt ist, in dem wir stellvertretend das Vorhandensein der Methode getContext() abfragen. Anschließend initialisieren wir das Element canvas mit dem zuvor erwähnten zweidimensionalen Kontext, um als nächstes die Anweisungen der Funktion zu schreiben. Um sie unmittelbar nach dem Laden der Seite auszuführen, nutzen wir das onload Event des Body-Tags. In den nachfolgenden Beispielen wird auf die wiederholte Listung dieses Grundaufbaus verzichtet.

Wie im Quelltext zu sehen, wird zusätzlich noch die Methode fillStyle() einsetzt. Hiermit wird die Füllfarbe des gezeichneten Objektes angegeben. Im Abschnitt Farben und Transparenzen gehe ich näher auf Methoden ein, die sich mit der farblichen Gestaltung der Objekte befassen.

Pfade

Während die Methoden zur Erstellung von Rechtecken das gezeichnete Element ohne weitere, explizite Anweisungen zeichnen, ist es beim Zeichnen von Pfaden erforderlich, dem Element canvas deutlich zu machen, wo ein Pfad beginnt, wo er aufhört und in welcher Art und Weise er schließlich gezeichnet werden soll. Hierzu dienen folgende, parameterlose Funktionaufrufe:

Mit beginPath() wird ein neuer Pfad eingeleitet. Zu beachten ist hierbei, dass der Pfad zu dem Zeitpunkt noch nicht tatsächlich gezeichnet wird. Hierzu nutzt man im Anschluß die Methode stroke() oder/und fill(). Wird fill() eingesetzt, ist ein dezidiertes Schließen des Pfades über closePath() nicht erforderlich, da die Methode die Zeichenoperationen automatisch beendet.

Zeichnen wir als erstes Beispiel eine einfaches Dreieck.

Quelltext Beispiel 2: Pfad zeichnen (Dreieck)

ctx.beginPath();
ctx.fillStyle = "rgb(30,144,255)";
ctx.moveTo(10,10);
ctx.lineTo(100,10);
ctx.lineTo(10,100);
ctx.fill();

Beispiel 2: Pfad zeichnen (Dreieck)

Schauen wir uns das letzte Beispiel an, sehen wir, dass zwei noch unbekannte Methoden verwandt werden:

Mit moveTo(x,y) wird festgelegt, an welcher Koordinate (x,y) die nachfolgende Zeichenoperation begonnen werden soll. Der Startpunkt des aktuellen Pfades schließt automatisch an dem Endpunkt des vorherigen Pfades an. Gleichzeitig definiert der Endpunkt des aktuellen Pfades immer auch den Startpunkt eines nachfolgenden Pfades. Mit der Funktion lineTo(x,y) wird die eigentliche Linie gezeichnet.

Neben Linien gibt es dankenswerter Weise auch eine direkte Methode zur Definition von Kreisen (oder besser: gebogenen Linien), die mit arc() benannt ist.

Parameter x und y beschreiben die Koordination des Kreises bezogen auf den Mittelpunkt des Kreis. Der radius bestimmt den Umfang des Kreises, startAngle und endAngle legen den Beginn und das Ende des Kreispfades anhand der X-Koordinate fest. Der boolsche Paramenter anticlockwise bestimmt, ob unser Kreis im oder gegen den Uhrzeigersinn gezeichnet wird.

Quelltext Beispiel 3: Kreis zeichnen

ctx.beginPath();
ctx.fillStyle = "rgba(30,144,255,0.5)";
ctx.strokeStyle = "rgba(30,144,255,1)";
ctx.arc(70,80,65,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
ctx.stroke();

Beispiel 3: Kreis zeichnen

Hinweis: Durch die Parameterangabe Math.PI*2 wird ein geschlossener Kreis erzeugt. Um Teilkreise zu erstellen, kann dieser Parameter angepasst werden.

Auch Bezier-Kurven (quadraticCurveTo(), bezierCurveTo()) können über bereitgestellte Methoden gezeichnet werden. Deren detailierte Anwendung wird hier aber nicht beschrieben, da dieses den Rahmen des Artikels sprengen würde. Details zu Anwendung und Parameter findest du auf den am Ende des Artikels gelisteten Seiten.

Gleiches gilt für weitere, hier nicht erwähnte Methoden, die das Element canvas bereitstellt. Zu erwähnen sind hier besonders die Möglichkeit Verläufe zu definieren, Schatten zu erzeugen und Methoden um Objekte zu transformatieren und skalieren.

Bilder und Grafiken

Spannend ist auch die Fähigkeit des Elementes canvas, Bilder/Grafiken und Zeichenoperationen zu kombinieren und sie zu einer Ansicht zusammenzufügen. Methoden zum Schneiden und Skalieren eines Bildes oder einer Grafik werden ebenfalls bereitgestellt.

Um ein Bild oder eine Grafik innerhalb des canvas zu referenzieren, gibt es verschiedene Methoden. Eine davon ist die Erzeugung eines neues Bildes über das DOM Objekt Image.

Quelltext: Erstellen eines Bildes anhand des DOM Objekt Image

var img = new Image();
img.onload = function(){
  Hier definieren wir später die Funktionen/Methoden
}
img.src = 'koordinaten-hintergrund.png';

Da unsere Funktion nicht vor dem vollständigen Laden des neuen Bildes ausgeführt werden sollen, wird deren Ausführung an den onload Event Handler des Image Elementes gebunden. Die hier genutzte Grafik koordinaten-hintergrund.png ist in dem Fall unsere Bezugsdatei, über die wir unseren Pfad zeichen wollen. Zur Einbindung nutzen wir die Methode drawImage().

Während die Koordinaten x und y für die Positionierung auf der Leinwand zuständig sind, beinhaltet der Parameter image die Referenz unseres Bildes/unserer Grafik oder eines anderen canvas Objektes.

Zu Beispiel 4: Referenzierte Grafik

Quelltext Beispiel 4: Bild/Grafik und Pfad kombinieren

function zeichne() {
  var canvas = document.getElementById('sample');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    var img = new Image();
    img.onload = function(){
      ctx.drawImage(img,0,0);
      ctx.beginPath();
      ctx.strokeStyle = "rgb(30,144,255)";
      ctx.moveTo(40,146);
      ctx.lineTo(100,96);
      ctx.lineTo(140,126);
      ctx.lineTo(170,62);
      ctx.lineTo(210,100);
      ctx.lineTo(240,32);
      ctx.stroke();
    }
    img.src = 'koordinaten-hintergrund.png';
  }
}

Beispiel 4: Bild/Grafik und Pfad kombinieren

Farben und Transparenzen

In nahezu allen bisherigen Beispielen werden die Methoden fillStyle() oder/und strokeStyle() verwandt. Hiermit geben wir unseren Formen und Pfaden den farblichen Anstrich.

Verschiedene Notationen der Farben sind möglich, die auf der Spezifikation des W3C Farbmoduls basieren. Folgende Notationen sind in Ihrer Ausgabe identisch:

Quelltext: Werteangaben und Notationen für Farben

ctx.fillStyle = "dodgerblue";
ctx.fillStyle = "#1E90FF";
ctx.fillStyle = "rgb(30,144,255)";
ctx.fillStyle = "rgba(30,144,255,1)";

Das W3C Farbmodul erlaubt auch eine Notation im HSL(A) Format. Dieses wird aber bislang nur unzureichend von wichtigen Browsern unterstützt.

Hinweis: Definiert man eine Farbangabe, ist diese für alle Elemente gültig. Möchte man verschiedenfarbige Elemente haben, muss sie explizit für jedes Element überschrieben, respektive neu gesetzt werden.

Über rgba und der canvas Methode globalAlpha haben wir zwei Möglichkeiten, Transparenzen zu nutzen. Schauen wir uns zuerst die rgba Notation an.

Quelltext: Transparenzen über die rgba Notation

ctx.fillStyle = "rgba(30,144,255,0.5)";
ctx.fillStyle = "rgba(30,144,255,1)";

Die Notation innerhalb rgba ist identisch mit der von rgb, hat aber einen zusätzlichen Parameter am Ende der Notation. Der letzte Parameter bestimmt die Sichtbarkeit des Elementes, wobei 1.0 vollständige Deckung, 0.0 vollständige Transparenz bedeutet.

Quelltext Beispiel 5: Transparente Kreise mit rgba Notation

ctx.beginPath();
ctx.fillStyle = "rgba(30,144,255,0.4)";
ctx.arc(70,75,65,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();

ctx.beginPath();
ctx.fillStyle = "rgba(30,144,255,0.7)";
ctx.arc(120,75,65,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();

Beispiel 5: Transparente Kreise mit rgba Notation

Die zweite Möglichkeit, die elementunabhängige Definition über die Methode globalAlpha(), macht es möglich, übergreifend für alle Elemente der Leinwand einen Standardwert für Transparenzen zu setzen, der alle Farbangaben beeinflußt.

Der Wertebereich liegt auch hier zwischen 1.0 (vollständige Deckung) und 0.0 (vollständige Transparenz).

Quelltext Beispiel 6: Transparente Kreise mit Methode globalAlpha()

ctx.globalAlpha = 0.5;

ctx.beginPath();
ctx.fillStyle = "#1E90FF";
ctx.arc(70,75,65,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();

ctx.beginPath();
ctx.fillStyle = "#1E90FF";
ctx.arc(120,75,65,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();

Beispiel 6: Transparente Kreise mit Methode globalAlpha()

Animationen

Durch die Bindung des Elementes canvas an DOM Methoden, die über eine Script-Schnittelle nutzbar sind, ist es grundsätzlich möglich, Objekte zu animieren. Dass das Element nicht konzipiert wurde um komplexer Animations-Software wie Flash oder Silverlight Konkurrenz zu machen, lässt sich an einigen Limitierungen erkennen. Nicht nur aufgrund der Komplexität und der damit notwendigen Ausführlichkeit in der Beschreibung, möchte ich auf die im Anschluß an den Artikel verlinkten Seiten verweisen. Dort findet man detailierte Beschreibungen, Beispiele und vieles mehr.

Zugänglichkeit (Accessibility)

Momentan können Inhalte des Elementes canvas ausschließlich über die Script-API erreicht werden. Auch der Umstand, dass als Fallback beliebige Elemente innerhalb der Element-Tags plaziert werden können, kann dem generierten Inhalt nicht in jeden Fall entsprechen, bzw. ihn nicht alternativ abbilden. Das W3C scheint sich dieses Problems bewusst zu sein und arbeitet an einem Fahrplan, wie eine erhöhte Zugänglichkeit für das Element erreicht werden kann.

Weiterführende Informationen zum Element canvas

Spezifikation

• WHATWG – Element canvas
• W3C – Bugtracker um Fehler zu melden (Anmeldung erforderlich)

Tutorials und Informationen

• Mozilla Development Center Tutorial – Canvas
• HTML5 Doctor – Informationen zu den HTML5 Specs und deren Anwendung

Beispiele

• Animationen – Uhren
• Animationsexperiment
• Chrome Experiments – Komplexe Experimente unter Einsatz verschiedener Technologien
• Testoberfläche um die Möglichkeiten von Canvas interaktiv zu testen

Fazit

Meine Bewertung der aktuellen Implementierung des Elementes canvas ist ambivalent. Zum einen bietet es interessante Merkmale und Methoden um Webseiten zukünftig mit neuen, im jeweiligen Kontext sinnvollen Funktionen zu bestücken und zu erweitern. Auf der anderen Seite schaue ich ein wenig sorgenvoll auf die Tatsache, dass der Einsatz des Elementes im Moment vollständig abhängig ist von aktivierten Javascript. Mag man auch der Meinung sein, dass zusätzliche Funktionalität mit zusätzlicher Technik erkauft werden muss, ist die augenblicklich unzureichende Zugänglichkeit der Inhalte für Nutzerkreise, denen diese Technik nicht zur Verfügung steht, in meinen Augen durchaus eine Kritikpunkt.

Erfreulicherweise ist dieses Problem dem W3C bereits bewusst, und es wird an einer Lösung gearbeitet.