Coordinates & Transforms

Every object in a 2D game has a position on screen. Before you can move anything you need to know how that space is laid out — and how to place, turn and size objects in it with transforms.

Screen space

The canvas (or game window) is a grid of pixels. The origin (0, 0) is in the top-left corner; x increases to the right and y increases downward. So “jump up” means decreasing y — a classic beginner gotcha.

Drawing things

const ctx = canvas.getContext('2d')
ctx.fillStyle = 'black'
ctx.fillRect(0, 0, canvas.width, canvas.height)  // clear the frame

ctx.fillStyle = 'cyan'
ctx.fillRect(player.x, player.y, 32, 32)          // a 32×32 square at the player's position

Local space and transforms

You don’t want to recompute every vertex of a spaceship each time it moves or turns. Instead you describe the ship once in its own local space — centred on (0,0), pointing along +x — and apply a transform: translate (move), rotate (turn) and scale (resize). The transform maps local coordinates to world coordinates.

ctx.save()                       // remember the current transform
ctx.translate(ship.x, ship.y)    // move the origin to the ship
ctx.rotate(ship.angle)           // turn the axes
ctx.scale(ship.size, ship.size)
drawShipAtOrigin(ctx)            // draw as if the ship were at (0,0) pointing right
ctx.restore()                    // back to the previous transform

Pivot (origin) point

Objects rotate and scale around their local origin. If you define a sprite with its top-left corner at (0,0), it will spin around that corner. That’s why sprites are usually centred on their origin — or, for characters, have the origin at their feet.