Scene and player

Set up a scene and player drawing on a canvas 2D context.

The player rectangle

We keep scene objects as JavaScript objects. The player object has four properties: x and y for the top-left corner, width and height for its size.

For example { x: 180, y: 120, width: 40, height: 40 } places a 40x40 square at point (180, 120). The canvas origin is the top-left corner; the y axis grows downward.

The draw loop

Each frame we first clear the scene with ctx.clearRect(0, 0, canvas.width, canvas.height). Then we draw the player with ctx.fillRect(player.x, player.y, player.width, player.height). Finally we request the next frame with requestAnimationFrame(draw).

These three steps live in a draw function, and the loop starts with a draw() call. Clear → draw → request again.

Exercise Draw the scene and player

Define player as { x: 180, y: 120, width: 40, height: 40 }. Then add a draw function: clear the scene with ctx.clearRect, set the color to "#2563eb" with ctx.fillStyle, draw the player with ctx.fillRect and keep the loop running with requestAnimationFrame(draw). Finally start it with draw().

Show example solution

const player = { x: 180, y: 120, width: 40, height: 40 };

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "#2563eb";
  ctx.fillRect(player.x, player.y, player.width, player.height);
  requestAnimationFrame(draw);
}

draw();

Test yourself

Set a color with fillStyle

ctx.fillStyle = ____;

Show answer

ctx.fillStyle = "#2563eb";

Which method fills a rectangle with color?
- strokeRect()
- clearRect()
- fillRect()
- drawRect()
Show answer

fillRect() — Correct! fillRect(x, y, w, h) fills the inside with color.
Match the canvas methods

clearRect

Clear area
fillRect

Paint rectangle
fillStyle

Set color
getContext

Get context

Next lesson: Motion and interaction

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies