Как плавно передвинуть несколько элементов в Canvas?

Question

[AndreySergienko]

Таким образом я отрисовал 12 кругов.

function generateCoordinateElement(n) {
  for (let i = 0; i < n; i++ ) {
    let y = getRandomInRange(400, canvasHeight - 20)
    let x = 50 + 50 * i * 1.5
    listOfCoordinatesOfElements.push({x, y})
  }
}

function createCircle(coordinateElement) {
  ctx.beginPath()
  ctx.fillStyle  = 'white'
  ctx.arc(coordinateElement.x,  coordinateElement.y, 10, 0, 2 * Math.PI)
  ctx.fill()
}

function drawChart() {
  generateCoordinateElement(12)
  listOfCoordinatesOfElements.map((coordinateElement) => {
    createCircle(coordinateElement)
  })
}

drawChart()

По нажатию на любую область экрана необходимо каждому кругу изменить координаты по Y и чтобы круг плавно переместился после нажатия.
Из документации видно, что можно через translate, но не соображу как сделать так, чтоб работало.

Comments

[Александр Шипин]

1. В какой документации видно?
2. Ответ лежит здесь
3. Более подробнее здесь