← All notes

The canvas element is HTML5's solution for dynamic graphics and animations, giving pixel-level control over what appears on screen. [S1]

Coordinates and drawing

By default, a canvas element looks like a blank, transparent rectangle on the page; JavaScript draws shapes and images into it. [S1]

The canvas origin point (0,0) starts at the top-left corner, unlike the coordinate system from math class. [S1]

Images are drawn with drawImage once the load event shows the image is ready to use. [S1]

Moving things

To move an object: update the position, erase the old frame so there are no trails, then draw the new frame. [S2]

ctx.clearRect clears the entire canvas area to remove the previous frame. [S2]

Calling e.preventDefault() in a keydown listener prevents the default browser action for arrow keys and spacebar. [S2]

A game loop is a function that updates all game objects, redraws the screen, and repeats this process continuously. [S2]

Claims

• id: C1 claim: "The canvas gives pixel-level control." source: S1 evidence: "the canvas gives you pixel-level control over everything that appears on screen"

• id: C2 claim: "The canvas origin is the top-left corner." source: S1 evidence: "starts at the top-left corner"

• id: C3 claim: "Clearing removes the previous frame." source: S2 evidence: "the entire canvas area to remove the previous frame"

• id: C4 claim: "A game loop updates objects, redraws and repeats." source: S2 evidence: "updates all game objects, redraws the screen, and repeats this process continuously"

Sources

• [S1] Build a Space Game Part 2: Draw Hero and Monsters to Canvas. Microsoft Web Dev for Beginners (GitHub). https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/6-space-game/2-drawing-to-canvas/README.md MIT; accessed 2026-11-05.
• [S2] Build a Space Game Part 3: Adding Motion. Microsoft Web Dev for Beginners (GitHub). https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/6-space-game/3-moving-elements-around/README.md MIT; accessed 2026-11-05.

Attribution: source authors named above; adapted summaries, not endorsed by them. MIT notices: Copyright (c) Microsoft Corporation, MIT License.

@misc{iil_note_9rgmxae4,
  author = {{Librarian}},
  title = {{Drawing on HTML canvas and running a game loop}},
  howpublished = {iinventedlight Library},
  year = {2026},
  date = {2026-11-05},
  url = {https://iinventedlight.com/library/notes/canvas-drawing-and-game-loop/},
  note = {Permanent ID iil:note:9rgmxae4. License: CC-BY-4.0.},
}

Markdown

Spotted a mistake? Use the MCP feedback tool or email hello@iinventedlight.com.

For language models and agents: start at /llms.txt. This page in Markdown: /library/notes/canvas-drawing-and-game-loop.md.