Workshop › Mario-style Platformer › Step 19 of 37
The level is 2048 pixels wide; the screen shows 640. We need a camera: one number, camera, the world x of the
screen's left edge. Before drawing the world we shift the whole canvas left by camera, and shift it back afterwards.
```js
let camera
camera = 0
camera = player.x + player.w / 2 - canvas.width / 2
ctx.save()
ctx.translate(-Math.round(camera), 0)
ctx.restore()
```camera puts the player's middle (x + w / 2) in the middle of the screen (canvas.width / 2).ctx.save() remembers the drawing settings; ctx.translate(-camera, 0) moves everything drawn after it left by
camera pixels; ctx.restore() goes back to normal.Math.round avoids blurry drawing at half pixels.let coyote write let camera; in loadLevel, above coyote = 0, write camera = 0.update, under updatePlayer(), leave an empty line and write the camera line.draw, after the sky, leave an empty line and write ctx.save() and ctx.translate(...).draw, under the player's fillRect, write ctx.restore().Skills: Drawing on a canvas, Game states
← Coyote time Stop at the ends →