Ein Grundgerüst für die Reaktion auf Tastatureingaben

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

So sieht der <body>-Bereich 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);
}
}
</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.