Rechtecke ▭

Rechtecke sind die einfachsten Formen, die wir mit der Canvas-API zeichnen können. Es gibt drei Funktionen dafür — alle drei nehmen die gleichen vier Werte entgegen:

ctx.fillRect(x, y, breite, höhe)
  • x: x-Koordinate der oberen linken Ecke des Rechtecks
  • y: y-Koordinate der oberen linken Ecke des Rechtecks
  • breite: Breite des Rechtecks in Pixeln
  • höhe: Höhe des Rechtecks in Pixeln

fillRect() — ausgefülltes Rechteck

Zeichnet ein ausgefülltes Rechteck. Um Farben kümmern wir uns im nächsten Kapitel — ohne weitere Angaben wird in Schwarz gezeichnet.

strokeRect() — nur der Umriss

Zeichnet nur die Umrandung eines Rechtecks (nicht ausgefüllt).

clearRect() — löschen

Löscht einen rechteckigen Bereich (macht ihn wieder transparent).

📌 Canvas funktioniert anders als Photoshop nicht mit Ebenen, sondern speichert immer nur die obersten sichtbaren Pixel. Deshalb legt clearRect zuvor gemalte Pixel nicht wieder frei, sondern setzt den Bereich in seinen Ursprungszustand zurück.

Position vs. Größe verstehen

  • Position (x, y): wo das Rechteck startet (obere linke Ecke)
  • Größe (breite, höhe): wie groß das Rechteck ist

Das Rechteck unten startet bei x = 100 und endet bei x = 100 + 200 = 300; es startet bei y = 50 und endet bei y = 50 + 100 = 150.

Übung 1 🎯 — Dein erstes Rechteck

Male ein Rechteck, 400 × 300 groß, an Position (50, 100).

Übung 2 🎯 — Mehrere Rechtecke

Male drei Rechtecke unterschiedlicher Größe auf das Canvas. Experimentiere mit verschiedenen Positionen!

Übung 3 🎯 — Ein kleines Logik-Rätsel

Repliziere das Zielbild unten exakt. Es besteht aus 6 Befehlen:

  • ein äußerer Rahmen (strokeRect)
  • zwei ausgefüllte Quadrate (fillRect)
  • zwei Umriss-Quadrate (strokeRect)
  • ein Loch (clearRect) — genau dort, wo sich die beiden gefüllten Quadrate überlappen

Im Bild sind nur wenige Maße eingezeichnet — der Rest ist ein Rätsel, das du dir erschließen musst:

  • Alle vier kleinen Quadrate sind gleich groß (siehe die 100-Markierung).
  • Innerhalb jedes Paares ist das zweite Quadrat diagonal um die Hälfte versetzt — die beiden überlappen sich also zu einem Viertel.
  • Das Loch ist genau die Überlappung der beiden gefüllten Quadrate.
  • Das Schachbrett-Muster zeigt, wo clearRect das Canvas wieder durchsichtig gemacht hat.

📌 Du kannst nur ausschneiden, was vorher schon gezeichnet wurde — achte also auf die Reihenfolge deiner Befehle.

Zielbild:

Geschafft! 🚀

Du kennst jetzt fillRect, strokeRect und clearRect und den Unterschied zwischen Position und Größe.

Weiter geht’s mit Farben →

← Zurück zur Canvas-Übersicht