← Back to Portfolio

🎮 Input / Output

Canvas Rendering

Project Evidence Required

Draw sprites, backgrounds, platforms using the Canvas API.

Assessment Method

Code review: draw() method implementations

What it is

The HTML5 <canvas> element gives you a 2D drawing surface controlled by JavaScript. You get the context via canvas.getContext('2d'), then call methods like ctx.drawImage(), ctx.fillRect(), ctx.beginPath(), ctx.stroke(). Each frame you clear and redraw.

Why it matters

The canvas is the visible output of the game. Everything the player sees comes from draw() calls. Layer order matters — background first, then platforms, then characters, then HUD on top.

How GateGame implements it

Each entity’s draw() method uses ctx.drawImage() with source rectangle (which frame of the spritesheet) and destination rectangle (where on the canvas). Splines render via ctx.beginPath() + ctx.moveTo() + ctx.lineTo() + ctx.stroke(). When debug mode is on, ctx.strokeRect() outlines hit boxes for visual debugging.

Code Example

// Sprite render with source rect + destination rect
draw() {
  this.ctx.drawImage(
    this.spriteSheet,
    sx, sy, sw, sh,                            // source frame
    this.position.x, this.position.y,
    this.width, this.height                    // destination
  );
}

// Debug hitbox rendering
this.ctx.strokeStyle = 'red';
this.ctx.strokeRect(this.x, this.y, this.width, this.height);

Key Takeaway

Each frame: clear → background → platforms → characters → HUD. Order is layering; first drawn is back-most.

---