HTML5 Canvas: Einsteiger Tutorial Teil 1 - Einführung

In diesem Tutorial möchte ich die Grundlagen vom HTML 5 Canvas erläutern. Das Tutorial richtet sich vor allem an Einsteiger, die vorher noch nie mit dem HTML5 Canvas Element gearbeitet haben.

Das Tutorial ist in die folgenden vier eigenständige Teile gegliedert, die jeweils einen eigenen Aspekt beleuchten:

• Teil 1: Einführung und Grundlagen
• Teil 2: Linien zeichnen
• Teil 3: Rechtecke und Kreise
• Teil 4: Text auf den Canvas schreiben

Die Einführung sollte man auf jeden Fall lesen, da die anderen Teile des Tutorials darauf aufbauen.

Was ist der HTML5 Canvas?

Das Canvas-Element wurde in HTML5 eingeführt und kann dazu benutzt werden, schnell und unkompliziert Grafiken auf einer Website zu zeichnen und darzustellen. Das besondere am HTML5 Canvas ist, dass man seine Grafik live über Skriptsprachen wie JavaScript zeichnen und aktualisieren kann.

Im Gegensatz zu statischen Grafiken die zum Beispiel als PNG oder JPG Datei auf dem Server liegen, ist es mit dem HTML5 Canvas so zum Beispiel möglich, die Grafik jederzeit dynamisch anzupassen und der Nutzer-Interaktion anzupassen. Beispielsweise für die Visualisierung von Daten.

HTML

Schauen wir uns zunächst an, wie wir das HTML5 Canvas Element in unserer HTML Seite einbauen können. Dazu reicht folgendes aus:

<canvas id="canv" width="200" height="200"></canvas>

Hiermit definieren wir eine Zeichenfläche in der Größe von 200 x 200 Pixeln. Wichtig ist eine id für das Element zu vergeben (hier "canv"), um das Element später ansprechen zu können.

Optional können wir einen Text innerhalb des Elements definieren, der dann angezeigt wird, wenn der Browser den HTML5 Canvas nicht unterstützt:

<canvas id="canv" width="200" height="200">
  Das Canvas-Element wird von Ihrem Browser nicht unterstützt.
</canvas>

Alle modernen Browser wie Firefox, Chrome, Opera, Safari und der Internet Explorer ab Version 9 unterstützen den Canvas.

JavaScript und der Context

Das war alles, was wir im HTML schreiben müssen. Der Rest und vor allen Dingen das Zeichen selbst geschieht in JavaScript.

Bevor wir mit dem Zeichnen beginnen, benötigen wir die folgenden beiden Zeilen:

var canvas = document.getElementById('canv');
var context = canvas.getContext('2d');

In der ersten Zeile suchen wir das Canvas-Element über dessen id. Im Beispiel oben hatten wir die id "canv" benutzt, natürlich lässt sich auch jeder andere Bezeichner verwenden.

Anschließend benutzen wir die Methode getContext('2d') um ein Context-Object zu unserem Canvas zu bekommen. Dieses Kontext-Objekt wird von HTML 5 bereitgestellt und enthält alle Methoden um auf dem Canvas zu zeichnen.

Nächster Schritt: Zeichnen

Dies waren alle wichtigen Grundlagen, die wir benötigen, um unseren Canvas nutzen zu können. Im nächsten Schritt wollen wir uns ansehen, wie wir auf unserem Canvas etwas zeichnen. Im zweiten Teil dieses Tutorials geht es genau darum.