Workshop › Mario-style Platformer › Step 21 of 37

Draw only what is on screen

What we are doing

We still draw all 64 columns, though only about 21 are on screen. Knowing the camera, we draw only the visible columns. This is called culling, and it keeps huge levels fast.

```js
// Only draw the columns that are on screen.
const first = Math.floor(camera / TILE)
const last = Math.min(COLS - 1, first + Math.ceil(canvas.width / TILE))
for (let row = 0; row < ROWS; row++) {
  for (let col = first; col <= last; col++) {
```

What it means

first is the column at the screen's left edge.
Math.ceil rounds up: 640 / 32 = 20 columns fit; from first to first + 20 covers a column cut in half at each edge. Math.min(COLS - 1, ...) keeps it inside the level.
The inner loop now runs from first to last, including last (<=).

Your turn

In draw, above the tile loops write the comment, first and last, and make the inner loop go from first to last.

Skills: Drawing on a canvas

← Stop at the ends Coins →

All steps