Canvas

Canvas

Canvas ist ein HTML5-Element, das es ermöglicht, über JavaScript dynamische Grafiken, Animationen, Diagramme oder sogar einfache Spiele direkt im Browser zu zeichnen – ohne Zusatz-Plugins wie Flash.

Funktionsweise

Das <canvas>-Element definiert eine Zeichenfläche auf der Webseite. Mit JavaScript-Befehlen kann man darauf Linien, Kreise, Texte oder Bilder zeichnen und so interaktive Inhalte erstellen.

Beispielcode

<canvas id="meinCanvas" width="300" height="150"></canvas>

<script>

 var c = document.getElementById("meinCanvas");
 var ctx = c.getContext("2d");
 ctx.fillStyle = "blue";
 ctx.fillRect(10, 10, 100, 50);

</script>

Einsatzbereiche

• Diagramme und Visualisierungen
• Benutzerdefinierte Bedienelemente
• 2D-Games im Browser
• Echtzeit-Animationen

Vorteile

• Direkte Steuerung über JavaScript
• Keine zusätzlichen Plugins notwendig
• Unterstützt von allen modernen Browsern

Alternativen

Für komplexere Szenarien (z. B. 3D-Grafiken) kann WebGL verwendet werden, das auf dem Canvas-Element basiert.