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

Question

[Егор Кондратьев]

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

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

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

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

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

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

Это мой первый опыт с хостом. Мне обязательно нужна возможность навешивать события на закрашенные области и только так у меня получается сейчас. Приветствуется любая помощь по вопросу.

Answer 1

[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--) {
...

Comments

[Егор Кондратьев]

Спасибо, это то что нужно!