Canvas - HTML5 - page 118

5.1 Ein erstes Beispiel

Bei Canvas (übersetzt Leinwand ) handelt es sich vereinfacht gesagt um ein pro-
grammierbares Bild, auf das mithilfe einer Javascript-API gezeichnet werden
kann. Dazu benötigen wir neben einem canvas -Element als Leinwand auch ein
script -Element, in dem die Zeichenbefehle Platz finden. Beginnen wir mit dem
canvas -Element:
<canvas width="1200" height="800">
alternativer Inhalt für Browser ohne Canvas-Unterstützung
</canvas>

Die Attribute width und height bestimmen die Dimension des canvas -Elements
in Pixel und reservieren entsprechend viel Platz auf der HTML-Seite. Fehlt eines
oder fehlen gar beide Attribute, kommen Vorgabewerte zum Tragen: 300 Pixel
für die Breite und 150 Pixel für die Höhe. Der Bereich zwischen Start- und End-
Tag ist für alternativen Content reserviert, der zur Anzeige gelangt, wenn ein
Browser Canvas nicht unterstützt. Ähnlich wie das alt -Tag bei Bildern sollte
dieser alternative Content den Inhalt der Canvas-Applikation beschreiben oder
einen entsprechenden Screenshot zeigen. Formulierungen wie Ihr Browser un-
terstützt Canvas nicht ohne Zusatzinformationen sind wenig hilfreich und des-
halb zu vermeiden.

Damit ist unsere Leinwand fertig, und wir können im nächsten Schritt die Zei-
chenbefehle in einem script -Element hinzufügen. Wenige Zeilen Code reichen
aus, um unser erstes, zugegebenermaßen recht triviales Canvas-Beispiel zu
realisieren.
<script>
var canvas = document.querySelector("canvas");
var context = canvas.getContext('2d');
context.fillStyle = 'red';
context.fillRect(0,0,800,600);
context.fillStyle = 'rgba(255,255,0,0.5)';
context.fillRect(400,200,800,600);
</script>

Auch wenn wir noch nichts über die Syntax der Canvas-Zeichenbefehle wissen,
ist bei näherer Betrachtung des Codes das Resultat in Abbildung 5.1 wenig
überraschend. Wir sehen ein rotes und ein hellgelbes Rechteck mit 50 % Opa-
zität, wodurch im Überlappungsbereich ein oranger Farbton entsteht.