CS111: Input/Output - Canvas Rendering
Drawing sprites and game elements using Canvas API
Input/Output: Canvas Rendering
Objective
Students must use the HTML5 Canvas API to render game graphics and animations.
Evidence
Canvas rendering in game components:
- SpriteSheetCoin.js - Sprite sheet rendering with frame selection
- Ghost.js - Entity rendering
- Multiple classes - Canvas API calls in draw() methods
Implementation Details
- Canvas context retrieval (2D)
- Drawing shapes and images
- Sprite rendering from sprite sheets
- Animation frame updates
- Transformation (rotation, scaling, translation)
Key Concepts
- Canvas element and context
- Canvas coordinate system
- Drawing methods: drawImage, fillRect, strokeRect, etc.
- Sprite sheet rendering
- Animation loops with requestAnimationFrame