Workshop › Mario-style Platformer › Step 1 of 37
Run, jump and stomp through a scrolling level to the flag. A level made of text, tile collisions, acceleration, coyote time, a camera, enemies and stomping.
We start with the usual frame: find the canvas, take its 2D context, and run a loop that paints the sky about 60 times a second.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
function draw() {
ctx.fillStyle = '#7dd3fc'
ctx.fillRect(0, 0, canvas.width, canvas.height)
}
function loop() {
draw()
requestAnimationFrame(loop)
}
requestAnimationFrame(loop)
```canvas is the 640×352 canvas, ctx its pen.draw fills the whole canvas light blue.loop draws, then asks the browser to call it again before the next screen refresh; the last line starts it.Write the code under the three comment lines, then press Run.
Skills: Drawing on a canvas, The game loop