Zeichnen mit Canvas

Das lernst du

Auf einer Zeichenfläche (canvas) Rechtecke und Kreise malen
Mit Schleifen Muster zeichnen
Eine Zeichnung per Klick verändern

Eine Leinwand im Browser

Mit <canvas> bekommt deine Seite eine Zeichenfläche. Darauf malst du mit JavaScript – Pixel für Pixel, wie auf Papier. Viele Browserspiele funktionieren genau so.

Zuerst holst du dir den Stift: getContext("2d"). Mit ihm wählst du eine Farbe und malst. Wie beim Spiele-Modul von Codelix ist (0, 0) oben links, und y zeigt nach unten:

<canvas id="bild" width="300" height="200"></canvas>

<script>
  const stift = document.querySelector("#bild").getContext("2d");

  stift.fillStyle = "skyblue";
  stift.fillRect(0, 0, 300, 200);      // Himmel

  stift.fillStyle = "forestgreen";
  stift.fillRect(0, 150, 300, 50);     // Wiese

  stift.fillStyle = "gold";
  stift.beginPath();
  stift.arc(240, 50, 30, 0, Math.PI * 2);
  stift.fill();                         // Sonne
</script>

Befehl	Was er macht
`stift.fillStyle = "red"`	Farbe zum Füllen wählen
`stift.fillRect(x, y, breite, hoehe)`	gefülltes Rechteck
`stift.beginPath()` … `stift.fill()`	eine Form beginnen und füllen
`stift.arc(x, y, radius, 0, Math.PI * 2)`	Kreis (ein ganzer Bogen)
`stift.font = "24px sans-serif"`	Schrift wählen
`stift.fillText("Hallo", x, y)`	Text malen

Muster mit Schleifen

Eine Schleife malt viele Formen auf einmal. Hier entsteht ein Schachbrett: Mit % entscheidest du, ob ein Feld hell oder dunkel ist:

<canvas id="brett" width="240" height="240"></canvas>

<script>
  const stift = document.querySelector("#brett").getContext("2d");
  for (let zeile = 0; zeile < 8; zeile++) {
    for (let spalte = 0; spalte < 8; spalte++) {
      stift.fillStyle = (zeile + spalte) % 2 === 0 ? "#eee" : "#555";
      stift.fillRect(spalte * 30, zeile * 30, 30, 30);
    }
  }
</script>

Malen per Klick

Auch ein canvas kann auf Klicks reagieren. event.offsetX und event.offsetY sagen dir, wo geklickt wurde. Klick in der Vorschau mehrmals auf die Fläche:

<canvas id="flaeche" width="300" height="200" style="border: 1px solid #ccc"></canvas>

<script>
  const flaeche = document.querySelector("#flaeche");
  const stift = flaeche.getContext("2d");
  const farben = ["tomato", "gold", "mediumseagreen", "royalblue", "orchid"];
  let nummer = 0;

  flaeche.addEventListener("click", (event) => {
    stift.fillStyle = farben[nummer % farben.length];
    stift.beginPath();
    stift.arc(event.offsetX, event.offsetY, 15, 0, Math.PI * 2);
    stift.fill();
    nummer++;
  });
</script>

Tipp: Schreib dir für Dinge, die du oft malst, eine eigene Funktion – zum Beispiel kreis(x, y, farbe). Das spart viele Zeilen. In der Aufgabe hilft dir das bei den drei Ampel-Lichtern.

Deine Aufgabe

Jetzt bist du dran

Mal eine Ampel auf die Zeichenfläche #bild (200 × 300 Pixel). Zuerst ein schwarzes Rechteck als Gehäuse: von (50, 20), 100 breit und 260 hoch. Darin drei Kreise mit Radius 35, alle bei x = 100: rot bei y = 70, gelb (gold) bei y = 150 und grün (limegreen) bei y = 230.

<canvas id="bild" width="200" height="300"></canvas>

<script>
  const stift = document.querySelector("#bild").getContext("2d");

  // Gehäuse

  // Drei Lichter
</script>

Denkanstoß
stift.fillStyle = "black"; dann stift.fillRect(50, 20, 100, 260);
Welcher Befehl hilft?
Ein Kreis: stift.beginPath(); stift.arc(100, 70, 35, 0, Math.PI * 2); stift.fill(); – vorher fillStyle auf "red".
Schreib dir eine Funktion kreis(x, y, farbe) – dann brauchst du die drei Zeilen für einen Kreis nur einmal.

Ohne Hinweise gelöst gibt es einen ⭐ auf deiner Fortschrittsseite.

Lösung anzeigen

Versuch es erst selbst – aus Fehlern lernt man am meisten. Hier ist eine mögliche Lösung:

<canvas id="bild" width="200" height="300"></canvas>

<script>
  const stift = document.querySelector("#bild").getContext("2d");

  function kreis(x, y, farbe) {
    stift.fillStyle = farbe;
    stift.beginPath();
    stift.arc(x, y, 35, 0, Math.PI * 2);
    stift.fill();
  }

  stift.fillStyle = "black";
  stift.fillRect(50, 20, 100, 260);

  kreis(100, 70, "red");
  kreis(100, 150, "gold");
  kreis(100, 230, "limegreen");
</script>