HTML - Element: <canvas>

Der <canvas>-Tag (HTML 5) dient zum Zeichnen von Grafiken, im laufenden Betrieb, über Skripte (in der Regel JavaScript). Der <canvas>-Tag ist nur ein Container für Grafiken, Sie müssen ein Skript verwenden, um tatsächlich die Grafiken zu zeichnen.

<!DOCTYPE html>
<html>
<head>
 <title>Zeichnen einer Grafik</title>
</head>
<body>

<h1>Zeichnen einer Grafik</h1>

<canvas id="myCanvas" 
   style="width:200px; height:90px; border: solid 1px #000000;">
</canvas>

<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// Ein blaues Rechteck zeichnen
ctx.fillStyle = 'rgb(0,191,255)'; // Farbe RGB
ctx.fillRect(10, 10, 100, 50); // Koordinaten
</script>

</body>
</html>

Beispiel anzeigen

Attribute

Die Attribute: width="" und height="" geben die Breite und die Höhe an.

<canvas id="myCanvas" width="200" height="90">
</canvas>