JavaScript Canvas Game From Scratch (No Engine)
JavaScript game development from scratch: game loop, canvas rendering, input and collision — no engine, no framework.
▶ Full written tutorial (free): https://generalistprogrammer.com/tuto...
Build a complete javascript canvas game from a single file, with nothing but the raw HTML5
Canvas API — no engine, no framework, no build step. Your whole game is just a web page, so
anyone can play it from a link.
This tutorial is beginner-friendly and every line is on screen as we go, pointing to a free
written guide so you can copy each snippet. All of the code is correct, current Canvas and
JavaScript — get a 2D context, a requestAnimationFrame loop with delta time, clear and redraw
each frame, keyboard input, and a player that moves and stays in bounds.
What we build, step by step:
The HTML: one canvas element with an id, a width and a height, plus a script tag that loads
the game code.
The 2D context: grab the element by its id, then call getContext to get the ctx we draw
everything through.
The game loop: requestAnimationFrame calls our loop every frame, and we compute delta time —
the seconds since the last frame — so movement is frame-rate independent on every machine.
Clear and draw: clearRect wipes the whole canvas, then fillStyle and fillRect paint the player
as a solid rectangle each frame.
Keyboard input: a keys object updated by keydown and keyup listeners, so update can read which
arrow keys are held right now.
Movement with delta time: multiply speed by dt so the player travels the same distance per
second at any frame rate, then clamp x and y with Math.max and Math.min so it never leaves the
canvas.
A circle enemy with beginPath and arc, plus a simple axis-aligned bounding box collision check
between the player rectangle and the enemy.
By the end you understand the loop that every engine hides from you: clear, update, draw, repeat.
Build one javascript canvas game by hand and Unity, Godot, and Phaser stop feeling like magic —
they are all doing exactly this under the hood, just faster.
Full written tutorial with every line of code:
https://generalistprogrammer.com/tuto...
Want 10 complete browser games with full source to reskin and ship — the Phaser Game Dev Bundle
($19):
https://generalistprogrammer.gumroad....
Coming next: turning this into a real game — a score, health, and enemies that chase you.
Subscribe so you catch it.
— Chapters —
0:00 A game with zero libraries
0:47 Phaser Game Dev Bundle ($19)
1:18 The canvas + 2D context
2:10 The requestAnimationFrame loop + delta time
3:17 Clear and draw the player
4:12 Keyboard input
5:03 Move with dt + clamp to bounds
6:04 A circle enemy + collision
7:10 Recap
7:58 Grab the bundle + subscribe
#gamedev #javascript #html5canvas