Как расставить точки на конкретных (заранее есть массив с координатами) координатах?

Question

[Марат Шакиров]

Есть массив координат, строятся линии по этим координатам, как на каждую координату сделать точку, чтобы в дальнейшем при наведении на нее показывалось окошко с конкретной координатой? Вопрос только как проставить эти точки?

Answer 1

[VoidVolker]

При движении мышкой сравнивать текущие координаты курсора с координатам точек и при наведении на точку показывать нужное окошко.

Comments

[Марат Шакиров]

Это понятно, как визуально сделать точки на начале и конце линии?
Здесь строятся линии:

ctx.lineWidth = 3;
  ctx.beginPath();
  for (const item of data) {
    if (car.vehicle === item.vehicle) {
      ctx.strokeStyle = car.color;
      ctx.lineTo(
        axisXCoordinates[item.time.getHours()] + item.time.getMinutes(),
        axisYCoordinates[item.place]
      );
    }
  }
  ctx.stroke();
  ctx.closePath();

[VoidVolker]

Берем координаты начала и конца линии и рисуем точку. В чем сложность-то?

[Марат Шакиров]

VoidVolker, вопрос в реализации.
Добавил ctx.arc(x, y, 5, 0, Math.PI * 2), но линии теперь не из центра круга, а с его границы идут и заканчиваются тоже не в центре круга, а рядом

[Марат Шакиров]

[VoidVolker]

Судя по картинке тут все в один заход рисовалось. Само собой надо сначала линии отрисовать, а потом уже точки.

[Марат Шакиров]

VoidVolker, точно, отдельно получилось, спасибо большое!