Wie unterscheide ich die Darstellung eines Rechtecks in HTML versus Canvas?
Rechteckdarstellung mit HTML
Wenn man ein Rechteck in HTML darstellen möchte, nutzt man in der Regel normale HTML-Elemente wie ein <div>.
Ein solches Element verhält sich wie ein Block-Container, dem man über CSS Breite, Höhe, Hintergrundfarbe und weitere Eigenschaften zuweist.
Diese Methode nutzt die bestehende Dokumentstruktur und die Stylesheets, die die optische Gestaltung regeln.
Ein wichtiges Merkmal hierbei ist, dass das Rechteck Teil des DOM (Document Object Model) ist, also zum Seiteninhalt gehört,
mit anderen Elementen interagiert, positionierbar, verschiebbar und ausrichtbar innerhalb des Layouts.
Ein einfaches Beispiel ist:
<div style="width: 200px; height: 100px; background-color: blue;"></div>Dieses <div> erzeugt ein einfaches, undurchsichtiges Rechteck mit blauer Füllung. Man kann weitere CSS-Eigenschaften hinzufügen,
wie eine Rahmenlinie, Schatten, Transparenz, abgerundete Ecken usw. Das Rechteck bleibt aber immer ein "normales" HTML-Element,
das sich meist gut in das Gesamt-Layout einfügt und von Browsern standardmäßig behandelt wird.
Rechteckdarstellung mit Canvas
Im Gegensatz dazu ist <canvas> ein spezielles HTML-Element, das eine Zeichenfläche (Bitmap) mit einer festen Größe bereitstellt.
Innerhalb dieser Fläche können mithilfe von JavaScript Formen, Linien, Bilder und Texte pixelgenau gemalt werden.
Das Rechteck ist hier keine Form im Sinne eines DOM-Elements, sondern wird als Pixelgrafik Teil eines Bitmap-Renderings.
Das heißt, sobald das Rechteck mit Canvas-Zeichenbefehlen gemalt wurde, existiert es nicht als wiedererkennbares Element, sondern als Teil des Bildes.
Ein einfaches Beispiel für ein Rechteck in Canvas sieht so aus:
<canvas id="meinCanvas" width="200" height="100"></canvas><script> const canvas = document.getElementById(meinCanvas); const ctx = canvas.getContext(2d); ctx.fillStyle = blue; ctx.fillRect(0, 0, 200, 100);</script>Das fillRect(x, y, width, height) zeichnet das Rechteck pixelgenau an der Position (x, y) in der Canvas-Fläche und füllt es mit der definierten Farbe.
Das ermöglicht sehr flexible und performante Grafiken und Animationen, allerdings geht dabei die enge Verzahnung mit dem DOM verloren.
Interaktionen oder Veränderungen müssen über JavaScript gesteuert werden, und die gezeichneten Formen sind nicht direkt selektierbar oder über CSS ansprechbar.
Zusammenfassung der Unterschiede
Der wesentliche Unterschied liegt darin, dass HTML-Elemente wie <div> Rechtecke im Layout-Kontext darstellen, die durch CSS formbar und Teil des DOM sind.
Das bedeutet, dass HTML-Rechtecke "lebendige" Elemente sind, wohingegen Canvas-Rechtecke statische Bildinhalte sind, die nur durch Neuzeichnen verändert werden können.
Diese Unterschiede führen auch zu verschiedenen Anwendungsfällen: Für einfache Layouts, Buttons, Container und strukturierte Inhalte eignen sich HTML-Rechtecke besser.
Für dynamische Grafiken, Spiele, Datenvisualisierungen und Animationen bringt Canvas Vorteile bei der Performance und Gestaltungskomplexität.