Workshop › Doodle Jump-style Climber › Step 7 of 24

Half here, half there

What we are doing

While the player crosses an edge, part of it is off the canvas. Drawing it a second time, shifted by the canvas width, shows that part on the other side.

```js
// Half off one side: draw the other half on the far side.
if (player.x < 0) ctx.fillRect(player.x + canvas.width, player.y, player.w, player.h)
if (player.x + player.w > canvas.width) ctx.fillRect(player.x - canvas.width, player.y, player.w, player.h)
```

What it means

• Sticking out on the left (x < 0): draw a copy one canvas width to the right; sticking out on the right: to the left.
• Whatever falls outside the canvas is simply not shown, so each copy shows exactly the missing part.

Your turn

In draw, under the player's fillRect, write the comment and the two lines.

Skills: Drawing on a canvas

← Through the sides Touch steering →

All steps

1. The jumper
2. Draw again and again
3. Gravity
4. Bounce
5. Steer left and right
6. Through the sides
7. Half here, half there
8. Touch steering
9. Platforms
10. Land on platforms
11. A camera that follows
12. Lines on the wall
13. How hard should it be?
14. Endless platforms
15. Miss and fall
16. Play again
17. Tap to play again
18. Score is height
19. Best score
20. Kinds of platform
21. Moving platforms
22. Traps
23. It breaks!
24. Build it yourself: springs