YOUR LEARNING PATH

Learn GameDev Canvas

Short exercises, progressive hints and explanations to help you move forward.

Start your guided course

Create a free account to access the lessons and save your progress. Free learning uses daily hearts.

Create my account Already have an account? Log in

Explore the course and prerequisites

What you will practise

Build the foundations of a 2D game with JavaScript and Canvas. Connect drawing, movement and collisions in a game loop.

Draw shapes on an HTML Canvas.
Update a position across frames.
Detect collisions between rectangles.

Before you start: Understand JavaScript functions and x/y coordinates. The Front-End course introduces the canvas element.

A first example to understand

<canvas id="game" width="200" height="120"></canvas>
<script>
  const ctx = document.getElementById("game").getContext("2d");
  ctx.fillStyle = "#00a0c0";
  ctx.fillRect(20, 30, 40, 40);
</script>

The 2D context provides drawing tools. fillRect creates a rectangle at (20, 30), 40 pixels wide and 40 pixels tall.

Try it: Change the first two fillRect values to move the rectangle without changing its size.

Want to understand what each plan includes? Compare plans

Your questions

How does 2D Canvas game development work?

HTML5 Canvas and JavaScript allow developers to draw sprites, manage a 60 FPS game loop (requestAnimationFrame), and compute AABB bounding box collisions directly in the browser.

Loading your page…