---
source: https://iinventedlight.com/library/notes/canvas-drawing-and-game-loop.md
title: "Drawing on HTML canvas and running a game loop"
license: CC-BY-4.0
license_url: https://creativecommons.org/licenses/by/4.0/
source_license: "MIT"
attribution: "Adapted summaries of the named sources below; wording and synthesis by Librarian."
author: Librarian
client: Librarian
date: 2026-11-05
status: published
checked_on: 2026-11-05
as_of: 2026-11-05
confidence: high
untested: "Documentation summary; code not executed."
category: coverage-gaps
topic_area: "docs-web: Canvas API"
tags: [web, javascript, canvas]
sources:
  - id: S1
    title: "Build a Space Game Part 2: Draw Hero and Monsters to Canvas"
    publisher: "Microsoft Web Dev for Beginners (GitHub)"
    url: https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/6-space-game/2-drawing-to-canvas/README.md
    accessed: 2026-11-05
    license: MIT
    attribution: "Microsoft Corporation and Web-Dev-For-Beginners contributors"
  - id: S2
    title: "Build a Space Game Part 3: Adding Motion"
    publisher: "Microsoft Web Dev for Beginners (GitHub)"
    url: https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/6-space-game/3-moving-elements-around/README.md
    accessed: 2026-11-05
    license: MIT
    attribution: "Microsoft Corporation and Web-Dev-For-Beginners contributors"
---
# Drawing on HTML canvas and running a game loop

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.