Workshop › Tower Defense › Step 18 of 42
Show the range
What we are doing
Around the lit tile, a thin circle shows how far a tower there would reach: its range, 2.5 tiles for arrows.
```js
ctx.strokeStyle = 'rgba(255, 255, 255, 0.6)'
ctx.beginPath()
ctx.arc((hover.col + 0.5) * TILE, TOP + (hover.row + 0.5) * TILE, TOWERS[selected].range * TILE, 0, Math.PI * 2)
ctx.stroke()
```
What it means
strokeStyle is the color of a line; stroke() paints the circle's outline instead of filling it.- The radius is the selected kind's range in tiles times
TILE: 2.5 × 40 = 100 pixels.
Your turn
In the if (hover) block, under the fillRect line, write the four circle lines.
Skills: Drawing on a canvas
← Show before you click Pick a target →
All steps
- Measure the map
- A map of tiles
- Draw it every frame
- The road as corners
- Fill in the road
- Draw the road
- Walking by distance
- Enemies on the road
- Walk
- Off the end of the road
- Here they come
- Towers
- From a click to a tile
- Click to build
- Where can you build?
- Show the gold
- Show before you click
- Show the range
- Pick a target
- Fire!
- A hit hurts
- Homing bullets
- Fizzle out
- Gold for every kill
- Lives
- Health bars
- Build, then defend
- Space starts a wave
- The wave is over
- Stronger every wave
- Closer together
- Out of lives
- No building after the end
- The most waves survived
- The game over screen
- Play again
- The bottom bar
- Click to start
- A second tower: the cannon
- Tower buttons
- Splash damage
- Build it yourself: sell a tower