Drawing & Movement

Now that we have a game loop running, let's learn how to draw shapes, understand the coordinate system, and make objects move across the screen.

The Canvas Coordinate System

Unlike traditional math class, the Canvas coordinate system has its origin (0, 0) at the top-left corner:

(0,0) ────────────────→ X (800)
  │
  │
  │    (100, 100) = 100px right, 100px down
  │
  ↓
  Y (600)

Drawing Basic Shapes

The Canvas 2D API provides methods for drawing various shapes. Here are the most useful ones:

Rectangles

// Filled rectangle
ctx.fillStyle = '#4ade80';  // Set fill color
ctx.fillRect(x, y, width, height);

// Stroked rectangle (outline only)
ctx.strokeStyle = '#ff00ff';
ctx.lineWidth = 3;
ctx.strokeRect(x, y, width, height);

// Clear a rectangular area
ctx.clearRect(x, y, width, height);

Circles (using arcs)

ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
ctx.fillStyle = '#00ffff';
ctx.fill();
ctx.closePath();

Lines

ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.lineTo(endX, endY);
ctx.strokeStyle = '#ffffff';
ctx.lineWidth = 2;
ctx.stroke();

Making Things Move

Movement in games is just changing the position over time. Remember our game loop? Each frame, we:

1. Update — Change the position (e.g., x += speed)
2. Clear — Wipe the canvas
3. Draw — Render at the new position

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// Player state
let player = {
    x: 50,
    y: 200,
    width: 40,
    height: 40,
    speed: 3
};

function gameLoop() {
    // UPDATE: Move right
    player.x += player.speed;

    // Wrap around screen
    if (player.x > canvas.width) {
        player.x = -player.width;
    }

    // CLEAR
    ctx.fillStyle = '#111';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // DRAW
    ctx.fillStyle = '#4ade80';
    ctx.fillRect(player.x, player.y, player.width, player.height);

    requestAnimationFrame(gameLoop);
}

gameLoop();

Keyboard Input

To control movement with the keyboard, we track which keys are pressed:

// Track pressed keys
const keys = {};

window.addEventListener('keydown', (e) => {
    keys[e.key] = true;
});

window.addEventListener('keyup', (e) => {
    keys[e.key] = false;
});

// In your game loop:
function update() {
    if (keys['ArrowUp'] || keys['w'])    player.y -= player.speed;
    if (keys['ArrowDown'] || keys['s'])  player.y += player.speed;
    if (keys['ArrowLeft'] || keys['a'])  player.x -= player.speed;
    if (keys['ArrowRight'] || keys['d']) player.x += player.speed;
}

Keeping Objects on Screen

Prevent objects from leaving the canvas with boundary checks:

function clampToCanvas(obj) {
    // Left boundary
    if (obj.x < 0) obj.x = 0;
    // Right boundary
    if (obj.x + obj.width > canvas.width) {
        obj.x = canvas.width - obj.width;
    }
    // Top boundary
    if (obj.y < 0) obj.y = 0;
    // Bottom boundary
    if (obj.y + obj.height > canvas.height) {
        obj.y = canvas.height - obj.height;
    }
}

Now you can draw shapes, move them, and control them with the keyboard. In the next tutorial, we'll learn how to detect when objects collide with each other!

Continue learning: Collision detection · Try the playground · See project routes