Making Web Games (HTML5 Canvas)

Quest Toolkit · Guide 5

Plain HTML5 Canvas is drawing and update logic you write yourself. No framework — maximum control, more boilerplate.

When to use Canvas

• Tiny games where Phaser feels like overkill.
• Custom rendering (particles, lines, generative art).
• Learning how loops, input, and sprites work under the hood.

The loop

1. Get canvas and 2d context.
2. Track state (player x/y, score, entities).
3. On each frame: clear, update positions, draw images or shapes.
4. Listen for keyboard, mouse, or touch.
5. requestAnimationFrame(gameLoop).

Drawing sprites

Load an Image, then drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh) to show one frame from a sheet. Track frame index and timer for animation.

Quest-sized scope

Snake, breakout, clicker, or one-screen toy. Under 200 lines is a good target. Host as a single HTML file if you want zero build step.

Tips

• Use integer positions for crisp pixel art.
• Separate update() and draw() so logic stays readable.
• Delta time (seconds since last frame) keeps speed consistent.
• Move to Phaser when you need tilemaps, sound banks, or physics.