Workshop › Lunar Lander › Step 6 of 31

Draw it around its own middle

What we are doing

The lander will tilt. Instead of computing every tilted corner, we move and turn the drawing itself to the lander, then draw a simple upright triangle around (0, 0).

```js
function drawLander() {
  ctx.save()
  ctx.translate(lander.x, lander.y)
  ctx.rotate(lander.angle)
  ctx.fillStyle = '#e2e8f0'
  ctx.beginPath()
  ctx.moveTo(0, -12)
  ctx.lineTo(9, 8)
  ctx.lineTo(-9, 8)
  ctx.fill()
  ctx.restore()
}

  drawLander()
```

What it means

• save remembers the normal drawing position; restore goes back to it, so later drawings are not moved or turned.
• translate makes (0, 0) the lander's middle; rotate turns "up" into the lander's up.
• The body is a triangle: tip at (0, -12), bottom corners at (9, 8) and (-9, 8).
• drawLander() is called after the ground, so the lander is drawn on top.

Your turn

1. Write drawLander just above function draw() {, with an empty line between.
2. In draw, under the pad's fillRect line, leave an empty line and write drawLander().

Skills: Drawing on a canvas

← The lander Two feet →

All steps

1. Random hills
2. Draw the hills
3. A landing pad
4. The height at any x
5. The lander
6. Draw it around its own middle
7. Two feet
8. The game loop
9. Moon gravity
10. Around the sides
11. Flying or not
12. Touching the ground
13. Remember held keys
14. Tilt
15. The engine
16. A flickering flame
17. Fuel
18. Touch controls
19. Landing or crashing
20. Fly again
21. Landed or crashed?
22. Readouts
23. Levels
24. Score
25. Next level or new game
26. A narrower pad
27. A high score
28. Burst into pieces
29. Pieces fall and fade
30. Draw the wreck
31. Build it yourself: wind