Ein erstes einfaches Grundgerüst zum Einbau einer Canvas-Grafik

Der Einbau einer Canvas-Grafik ist denkbar einfach:

In eine HTML-Datei wird, am besten gleich mit dem HTML5-DOCTYPE (sonst spielt der Internet Explorer 9 nicht mit), im <body> einfach das Canvas-Element eingefügt. Das ganze sieht so aus:

<!DOCTYPE html>
<html>
	<head>
		<title>Canvas-Grundgerüst</title>
	</head>
	<body>
		<canvas></canvas>
	</body>
</html>

Das sieht soweit ganz nett aus, doch wie kommt da nun irgendetwas rein, was wie eine Grafik aussieht?

Wie bereits beschrieben, ist die Nutzung des Canvas-Tags zwingend mit dem Einsatz von JavaScript verbunden. Im Beispiel soll der gesamte Canvas-Bereich mit einer Farbe gefüllt werden. Dazu wird

  • das HTML-Canvas-Element, das angesprochen werden soll, einer Variablen zugewiesen
  • der 2D-Canvas-Kontext initialisiert (Es gibt zurzeit nur diesen 2D-Kontext, spätere Versionen unterstützen möglicherweise auch 3D). Wenn die Initailisierung fehlschlägt, wird nichts gemacht
  • die Füllfarbe festgelegt
  • das Rechteck gezeichnet

So sieht der <body>-Bereich aus:

<body>
<h1>Canvas Grundgerüst Beispiel 1</h1>
<!--Canvas-Element mit Angabe zur Hoehe und Breite-->
<canvas width="300" height="200">
<!--Text der nur angezeigt wird, wenn Canvas nicht unterstützt wird-->
Dein Browser kann diese Grafik nicht darstellen.
Es soll eigentlich ein violettes Rechteck zu sehen sein.</canvas>
<script type="text/javascript">
	//Der 1.Canvas-Tag wird angesprochen
	var myCanvas = document.getElementsByTagName('canvas')[0];
	//Nur wenn getContext existiert...
	if(myCanvas.getContext){
	//...wird der 2d-Kontext zugewiesen
	var context = myCanvas.getContext('2d');
	//Farbe der Füllung festlegen
	context.fillStyle = "rgb(255, 0, 255)";
	//Gesamte Canvas füllen
	context.fillRect(0, 0, myCanvas.width, myCanvas.height);
	}
</script>

Beispiel ansehen

Diese Vorgehensweise hat aber einen Nachteil: Das JavaScript zum Füllen des Canvas-Objektes kann nur richtig ausgeführt werden, wenn die Seite vollständig geladen ist. Dies ist bei diesem einfachen kleinen Beispiel in der Regel kein Problem, trotz soll hier mit einem Beispiel-Code weitergearbeitet werden, bei dem der JavaScript-Code zum Zeichnen des Canvas-Inhaltes in einer Funktion gekapselt ist, die mit body onload aufgerufen wird. Dann sieht der <body>-Bereich so aus:

<body onload="zeichneCanvas();">
<h1>Canvas Grundgerüst 1 - Beispiel</h1>
<!--Canvas-Element mit Angabe zur Hoehe und Breite-->
<canvas width="300" height="200">
<!--Text der nur angezeigt wird, wenn Canvas nicht unterstützt wird-->
Dein Browser kann diese Grafik nicht darstellen.
Es soll eigentlich ein violettes Rechteck zu sehen sein.</canvas>
<script type="text/javascript">
	//Alles wird schön in eine Funktion gepackt
	function zeichneCanvas(){
	//Der 1.Canvas-Tag wird angesprochen
		var myCanvas = document.getElementsByTagName('canvas')[0];
		//Nur wenn getContext existiert...
		if(myCanvas.getContext){
		//...wird der 2d-Kontext zugewiesen
		var context = myCanvas.getContext('2d');
		//Farbe der Füllung festlegen
		context.fillStyle = "rgb(255, 0, 255)";
		//Gesamte Canvas füllen
		context.fillRect(0, 0, myCanvas.width, myCanvas.height);
		}//Ende if
	}//Ende zeichneCanvas()
	</script>
</body>
</html>

Beispiel ansehen

Außerdem kann man an dem Beispiel noch sehen, wie eine Füllungsfarbe festgelegt wird und ein gefülltes Rechteck gezeichnet wird.