Status: Aktueller Standard
<canvas> steht für canvas (Leinwand).
<canvas>-Tag in HTML wird verwendet, um dynamische, script-gesteuerte Grafiken zu zeichnen, wie z. B. Diagramme, Animationen, Spiele oder komplexe Visualisierungen. Es ist ein leeres Element, das selbst keine Inhalte anzeigt außer einem definierbaren Bereich. Alles, was dargestellt wird, muss über JavaScript gezeichnet werden.
<canvas id="..." width="..." height="...">...</canvas>Globale Attribute
Breite der Zeichenfläche
Höhe der Zeichenfläche
<canvas>
- --- <canvas id="meinCanvas" width="300" height="150">
Dein Browser unterstützt kein HTML5 Canvas.
</canvas>
<script>
const canvas = document.getElementById("meinCanvas");
const ctx = canvas.getContext("2d"); // 2D-Zeichnungskontext
// Rechteck füllen
ctx.fillStyle = "skyblue";
ctx.fillRect(50, 50, 100, 80);
// Rechteck umranden
ctx.strokeStyle = "darkblue";
ctx.strokeRect(50, 50, 100, 80);
// Linie zeichnen
ctx.beginPath();
ctx.moveTo(200, 50);
ctx.lineTo(350, 150);
ctx.strokeStyle = "red";
ctx.lineWidth = 3;
ctx.stroke();
// Text hinzufügen
ctx.font = "20px Arial";
ctx.fillStyle = "green";
ctx.fillText("Hallo Canvas!", 150, 30);
// Gefüllten Kreis zeichnen
ctx.beginPath();
ctx.arc(200, 100, 30, 0, 2 * Math.PI);
// Mittelpunkt x=200, y=100, Radius=30
ctx.fillStyle = "orange";
ctx.fill();
ctx.strokeStyle = "darkorange";
ctx.stroke();
</script>