CodeAgeBy Sitezack
Canvas für MacherZeichne und animiere dein Spiel0 XP
Kapitel-Fortschritt0/6

Lektion 2 von 7

Dein Zeichenblatt

Das <canvas>-Tag ist ein Zeichenblatt, Pixel für Pixel — hier leben die 2D-Spiele des Webs.

In JavaScript holst du dir den „Pinsel“ mit getContext('2d'): Er zeichnet alles. Deklariere deine Spielvariablen mit var, damit sie überall sichtbar sind.

<canvas id="game" width="300" height="200"></canvas>
<script>
  var canvas = document.querySelector('#game');
  var ctx = canvas.getContext('2d');
</script>

🎯 Dein Ziel

Erstelle ein <canvas id="game"> mit 300 mal 200 (Attribute width und height) und hole den 2d-Kontext in eine Variable ctx (mit var).

PRO-Lektion

Dieses fortgeschrittene Kapitel gehört zu CodeAge PRO. Schalte es frei, um dein Abenteuer fortzusetzen.

PRO entdecken