Workshop › Pool › Step 7 of 33
A shot goes in a direction, an angle aim in radians. A thin line from the cue ball shows it. Trigonometry turns the
angle into x and y: Math.cos(aim) is how far right, Math.sin(aim) how far down, for each unit along the line.
```js
let aim // angle of the shot, in radians
aim = 0
ctx.strokeStyle = 'rgba(255, 255, 255, 0.6)'
ctx.lineWidth = 1
ctx.beginPath()
ctx.moveTo(cue.x, cue.y)
ctx.lineTo(cue.x + Math.cos(aim) * 400, cue.y + Math.sin(aim) * 400)
ctx.stroke()
```aim starts at 0 (right) in reset.moveTo puts the pen on the cue ball, lineTo draws to a point 400 pixels along the aim, stroke paints the line.cos(0) is 1 and sin(0) is 0: the end is 400 to the right. At Math.PI / 2, cos is 0 and sin is 1: 400 down.let cue write let aim ...; in reset, under rack(), write aim = 0.draw, under the felt's fillRect, leave an empty line and write the six line-drawing lines.Skills: Drawing on a canvas
← Numbers on the balls Turn the aim →