Canvas ist ein HTML5-Element, das eine Zeichenfläche bereitstellt, auf der mit JavaScript dynamische 2D- oder sogar 3D-Grafiken direkt im Browser gerendert werden können.
Ein einfaches Beispiel für ein Canvas-Element sieht so aus:
|
1 2 3 |
<canvas id="meineZeichnung" width="400" height="300"> Ihr Browser unterstützt das Canvas-Element nicht. </canvas> |
Die Inhalte eines Canvas werden mithilfe von JavaScript erzeugt – zum Beispiel Linien, Formen, Bilder oder sogar Animationen und Spiele. Das Canvas selbst ist zunächst leer und fungiert wie eine leere Leinwand.
Die 2D-Zeichnungen erfolgen über das JavaScript-Objekt getContext("2d"). Für komplexere 3D-Grafiken wird oft WebGL verwendet.
Canvas ist ein wichtiges Werkzeug in der Webentwicklung, insbesondere in Bereichen wie Spieleprogrammierung, Interaktive Datenvisualisierung oder Bildbearbeitung im Browser.