Canvas zeichnen 🎨

Mit dem Canvas kannst du direkt im Browser zeichnen — Rechtecke, Kreise, Linien, Text und ganze Bilder. Du gibst dem Computer Anweisungen, was er wo malen soll, und siehst das Ergebnis sofort auf der Seite.

Du brauchst nichts zu installieren — alle Beispiele laufen direkt im Browser und das gezeichnete Canvas erscheint direkt unter dem Code. Ändere den Code, klick auf ▶ Ausführen (oder ⌘/Strg+Enter) und schau zu, wie sich das Bild verändert.

💡 In allen Beispielen steht dir bereits eine Variable ctx zur Verfügung — das ist der „Pinsel“, mit dem du auf das Canvas malst.

Kapitel

  1. Koordinatensystem 📐 — wie der Computer Positionen versteht
  2. Rechtecke ▭ — fillRect, strokeRect, clearRect
  3. Farben 🌈 — RGB, Hex, Transparenz, das Pinsel-Prinzip
  4. Andere Formen ⚪ — Pfade, Kreise, Linien, Dreiecke
  5. Text 🔤 — fillText, Schriftarten, Ausrichtung
  6. Bilder 🖼️ — drawPicture, Position, Größe, Ausschnitte
  7. Klicks 🖱️ — onClick, Moves, interaktive Felder

← Zurück zur Kurs-Übersicht