CodeAgeBy Sitezack
← Canvas for MakersDraw and animate your game⚡ 0 XP
Chapter progress0/6

Lesson 2 of 7

Your drawing sheet

The <canvas> tag is a pixel-by-pixel drawing sheet — it's where the web's 2D games live.

In JavaScript you grab its "brush" with getContext('2d'): it will draw everything. Declare your game variables with var so they're visible everywhere.

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

🎯 Your goal

Create a <canvas id="game"> of 300 by 200 (width and height attributes), then grab the 2d context into a variable ctx (with var).

PRO lesson

This advanced chapter is part of CodeAge PRO. Unlock it to keep your adventure going.

Discover PRO →