Canvas in HTML 5

HTML 5 Canvas ([PILG11], Kap. 4)

Canvas bedeutet 'Zeichenfläche', also eine Grafik-Wand, auf welche Punkte, Linien, Kreise, Rechtecke, Text ebenso wie Bilder gezeichnet werden können. Dieses Objekt ist auch schon in der Programmiersprache Java vorhanden, und kann nun in HTML verwendet und mit Javascript gesteuert werden. Hiermit sind auch Animationen möglich, für welches man bisher Flash von der Firma Adobe genutzt hat. Die Browser unterstützten momentan eine 2D-Fläche, also mit Koordinaten x und y.
Der Internet Explorer von Microsoft unterstützt momentan die Canvas-API noch nicht, eine nicht ganz 100% Abhilfe schafft hier die "explorercanvas-Bibliothek". Getrennt von der Zeichen-API ist "Canvas-Text", hier ist eine Unterstützung auch zu prüfen. Das Canvas hat wie in Java auch links-oben den Punkt (0,0), und rechts-unten den Punkt(breite-1,hoehe-1). Ein Pfad ist eine Folge von Punkten, welche erst gezeichnet oder gefüllt werden, wenn die Funktion stroke() oder fill() angewendet wird. Vor allem bei moveTo und lineTo werden Erinnerungen an Turtle-Grapfik von Logo wach.
Gezeichnet wird mit dem Kontext, hier eine Übersicht der Möglichkeiten.

Funktionen

Kategorie	Lösung/Methodenaufruf
Unterstützung prüfen Canvas	if (!!document.createElement('canvas').getContext)
Unterstützung prüfen Canvas-Text	if ((!!document.createElement('canvas').getContext) && (typeof document.createElement('canvas').getContext('2d').fillText == 'function'))
Breite/Höhe abfragen (mit DOM)	var hoe = document.getElementById('name').height; .width
Graphik-Context holen	var kon = document.createElement('canvas').getContext('2d');
Punktpfad starten/-enden	kon.beginPath(); kon.closePath();
Füllstil/Zeichenstil setzen (blau)	kon.fillStyle = '#00f'; kon.strokeStyle = '#00f'
gefülltes Rechteck zeichnen	kon.fillRect(x0, y0, breite, hoehe);
leeres Rechteck zeichnen	kon.strokeRect(x0, y0, breite, hoehe);
Rechtecksbereich löschen	kon.clearRect(x0, y0, breite, hoehe);
Positionierung am Punkt	kon.moveTo(x0, y0);
Bewegung vom aktuellen Punkt zum Endpunkt	kon.lineTo(xe, ye);
Zeichnen/Füllen	kon.fill(); kon.stroke();

Kurzes Beispiel: Zeichen von Säulen oder Tortendiagrammen

Literatur: [PILG11], Mark Pilgrim, "Durchstarten mit HTML 5", O'Reilly Verlag, 1. Auflage 2011
Internet-Spezifikation: HTML5-Canvas