Fractal Tree on HTML Canvas

fractalTree.js

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')

canvas.width = window.innerWidth
canvas.height = window.innerHeight

const { width, height } = canvas

const startX = width / 2
const startY = height - 100

let angle = 45 * Math.PI / 180

function modulusOfAVector({x, y}) {
  return Math.sqrt(x**2 + y**2)
}

canvas.addEventListener('pointermove', function({ clientX, clientY }) {
  requestAnimationFrame(() => {
    const mouseVec = { x: clientX - startX, y: clientY - startY }
    angle = Math.acos(-mouseVec.y / modulusOfAVector(mouseVec))
  
    ctx.clearRect(0, 0, width, height)
    ctx.save()
    ctx.translate(width / 2, height)
    branch(100, angle, ctx)
    ctx.restore()
  })
})

function branch(len, angle, ctx) {
  if (len > 5) {
    ctx.beginPath()
    ctx.moveTo(0, 0)
    ctx.lineTo(0, -len)
    ctx.stroke()
    ctx.translate(0, -len)
    ctx.save()
    ctx.rotate(angle)
    branch(len * 0.7, angle, ctx)
    ctx.restore()
    ctx.save()
    ctx.rotate(-angle)
    branch(len * 0.7, angle, ctx)
    ctx.restore()
  }
}