Was ist ein Canvas-Element in HTML5?

Das <canvas>-Element in HTML5 ist ein Container zum Zeichnen von Grafiken mit Skripten (meist JavaScript). Es ermöglicht die Erstellung dynamischer Visualisierungen, Spiele und Animationen direkt im Browser ohne Plugins.

Wichtige Aspekte:

• Pixelzeichnung: Arbeitet auf Pixelebene und bietet vollständige Kontrolle über jedes Bildelement.
• API-Nutzung: Die Interaktion mit <canvas> erfolgt über die Rendering-API, am gebräuchlichsten ist der 2d-Kontext für zweidimensionale Grafiken. Es gibt auch webgl für 3D.
• Leeres Canvas: Das <canvas>-Element selbst ist nur ein Container. Alle Zeichnungen werden programmatisch durchgeführt.

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

// Zugriff auf das Canvas-Element
const canvas = document.getElementById('myCanvas');

// Zugriff auf den 2D-Zeichnungskontext
const ctx = canvas.getContext('2d');

// Zeichnen eines Rechtecks
ctx.fillStyle = "#FF0000"; // Füllfarbe
ctx.fillRect(0, 0, 150, 75); // x, y, Breite, Höhe

Fähigkeiten umfassen:

• Primitive Formen (Linien, Rechtecke, Kreise, Bögen)
• Text
• Bilder
• Verläufe und Muster
• Pfade für komplexe Figuren