Как правильно настроить масштабирование холста при изменении разрешения?

Привет, я новичок в обращении с холстом и у меня возникла проблема.

Вот мой текущий код: https://codepen.io/lineez/pen/KKvmxNe?editors=0010

Я получаю динамические данные с шаблона при загрузке страницы как "const objects" тут.

Начальный размер холста 1150х610 и при таком раскладе все работает нормально, но проблемы начинаются при изменении разрешения на меньшее. Когда я отрисовываю области до наведения (черным), то оно выглядит правильно, но если навести на область, то закрашивание смещается.

Измените размер холста на меньший чем 1150, чтобы увидеть проблему с наведением

Как мне правильно отрисовывать область при наведении чтобы не было смещения?

Это мой первый опыт с хостом. Мне обязательно нужна возможность навешивать события на закрашенные области и только так у меня получается сейчас. Приветствуется любая помощь по вопросу.
  • Вопрос задан
  • 69 просмотров
Решения вопроса 1
twobomb
@twobomb
Как вариант
canvas.addEventListener('mousemove', function(event) {
      let scaleFactor = 1150/plan.offsetWidth;
      event = {
        offsetX:event.offsetX*scaleFactor,
        offsetY:event.offsetY*scaleFactor
      }
        for(let i = arr.length - 1; i >= 0; i--) {
...
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы