Let's set up the foundation for our vertical platformer by creating the project structure and rendering our first element to the canvas.

Create The Project Structure

Start by creating a new directory for your game and an index.html file to house your canvas element:

<canvas></canvas>

Open this in a browser and you'll have a blank canvas ready to go — though you won't see anything yet.

Add Some Contrast

To actually see where our canvas is, add a dark background to the body and set up a separate JavaScript file:

const canvas = document.querySelector('canvas')
const c = canvas.getContext('2d')

I use c as a short variable name for the canvas context since we'll reference it constantly throughout the game.

Size The Canvas

By default, canvas is only 300x150 pixels. We'll resize it to 1024x576 — a 16:9 aspect ratio that fits most desktop screens:

canvas.width = 1024
canvas.height = 576

Draw A Rectangle

Finally, draw a white rectangle to confirm everything is wired up correctly:

c.fillStyle = 'white'
c.fillRect(0, 0, canvas.width, canvas.height)

With that, you've got a properly sized canvas displaying a white rectangle — the starting point for everything we'll build.