Farben 🌈

Bis jetzt haben wir nur schwarze Rechtecke gezeichnet. Zeit für etwas Farbe!

Wie Computer Farben darstellen

Das gängigste System ist RGB — Rot Grün Blau. Eine Farbe besteht aus drei Zahlen, jeweils zwischen 0 und 255:

  • R (Rot): wie viel Rot? (0 = kein Rot, 255 = maximales Rot)
  • G (Grün): wie viel Grün?
  • B (Blau): wie viel Blau?

📌 RGB ist additive Farbmischung — wir mischen Licht, nicht Farbe! Alle Werte auf 0 → Schwarz (kein Licht). Alle Werte auf 255 → Weiß.

Farbe RGB-Notation
Rot rgb(255, 0, 0)
Grün rgb(0, 255, 0)
Blau rgb(0, 0, 255)
Gelb rgb(255, 255, 0)
Cyan rgb(0, 255, 255)
Magenta rgb(255, 0, 255)
Weiß rgb(255, 255, 255)
Schwarz rgb(0, 0, 0)
Grau rgb(128, 128, 128)

Farben in Canvas setzen

In Canvas funktionieren Farben wie bei einem echten Pinsel:

  1. Du wählst eine Farbe (tauchst den Pinsel ein)
  2. Du malst mit dieser Farbe
  3. Die Farbe bleibt aktiv, bis du sie wechselst
  • ctx.fillStyle — Farbe für ausgefüllte Formen
  • ctx.strokeStyle — Farbe für Umrisse

Das Pinsel-Prinzip

Einmal gewählt, bleibt die Farbe für alle folgenden Formen aktiv — bis du sie wechselst. Beide ersten Rechtecke unten sind rot, obwohl fillStyle nur einmal gesetzt wurde:

RGBA — Transparenz

Mit RGBA kannst du Farben halbtransparent machen. Der vierte Wert (Alpha) liegt zwischen 0 (komplett transparent) und 1 (komplett undurchsichtig):

ctx.fillStyle = "rgba(255, 0, 0, 0.5)"  // 50 % transparentes Rot

Übung 1 🎯 — Bunte Rechtecke

Male drei überlappende Quadrate in Rot, Grün und Blau mit jeweils 70 % Transparenz (Alpha 0.7).

Übung 2 🎯 — Schachbrett

Denk an die Loops aus dem JS-Tutorial zurück und male möglichst effizient ein Schachbrett: 8 × 8 Quadrate, alternierende Farben, dunkles Feld in der linken unteren Ecke.

⚠️ 64-mal ctx.fillRect zu kopieren zählt nicht als Lösung — benutze verschachtelte for-Loops!

💡 Tipp anzeigen
  • Verschachtle zwei Schleifen: eine äußere für die acht Zeilen und eine innere für die acht Spalten.
  • Ob ein Feld hell oder dunkel ist, kannst du daran festmachen, ob die Summe aus Zeilen- und Spaltennummer gerade oder ungerade ist. Welche der beiden Möglichkeiten dunkel ist, hängt davon ab, wo das dunkle Feld liegen soll.
  • Die Position eines Feldes berechnest du aus seiner Spalten- bzw. Zeilennummer mal der Feldgröße.

Übung 3 🎯 — Füllung und Rand

Schreib eine Funktion drawSquareWithBorder(x, y, width, height, strokeSize, fillColor, strokeColor), die ein Rechteck mit Rand zeichnet — Position, Breite, Höhe, Randdicke sowie Füll- und Randfarbe sind jeweils Parameter.

💡 Tipp anzeigen

Zwei übereinanderliegende Rechtecke ergeben den Eindruck eines Randes: erst ein großes in der Randfarbe, dann ein kleineres (um die Randdicke eingerückt) in der Füllfarbe.

Ruf deine Funktion dann viermal auf und reproduziere damit das Zielbild unten — und zwar genau mit diesen Werten:

  1. rot, Rand schwarz — Position (10, 10), 100 × 100, Randdicke 10
  2. grün, Rand weiß — Position (100, 10), 100 × 100, Randdicke 10
  3. blau, Rand rot — Position (10, 110), 90 × 90, Randdicke 4
  4. gelb, ohne Rand — Position (100, 100), 100 × 100, Randdicke 0

📌 Beim grünen Quadrat ist der Rand weiß — auf weißem Hintergrund also unsichtbar. Beim gelben Quadrat ist die Randdicke 0, es hat also gar keinen Rand.

Zielbild:

Geschafft! 🚀

Du beherrschst jetzt fillStyle / strokeStyle, das Pinsel-Prinzip, RGB / Hex / Farbnamen und Transparenz mit RGBA.

Weiter geht’s mit anderen Formen →

← Zurück zur Canvas-Übersicht