Как подстраивать размер канваса под размер страницы?

Question

[JVyacheslav]

У меня есть некоторый канвас, который растянут на всю страницу. Проблема в том, что при изменении размеров страницы, мне нужно изменять и его размер. Пытался просто установить размер канваса на 100%. Он растягивается, но вместе с этим блюрится содержимое. Тогда попытался создать ивент листенер на resize, который менял размеры канваса, подстраивал под них контекст и вызывал мой метод ререндеринга (если коротко - в json хранятся объекты, которые рисуются по координатам, ничего сверхъестественного). Так канвас начал подстраиваться правильно, однако он периодически просто зависает при выполнении подобных действий (например, влево ресайзило нормально, начал вверх - завис и не отвисает, или при переходе в полноэкранный режим браузера). Пытался использовать обсервер, который отслеживает ресайз и делает аналогичные действия. Результат оказался аналогичным, а то и хуже. Собственно, вопрос, как можно всё-таки динамически изменять размеры канваса под экранные?

Comments

[Антон Антон]

В ресайзе вызывать ререндер нормально, скорее всего зависает, потому что где-то циклится. Лучше это все делать через requestAnimationFrame, а не прямо в обработчике события. Если рисунок статический - то лучше на обработчик resize дополнительно навесить debounce

[JVyacheslav]

Да, действительно, оказалось, что проблема была в цикле: условие отделения пользовательского рисования и ререндера было ошибочно, из-за этого система считала, что при ререндеринге это не ререндеринг рисует объект, а пользователь добавляет новый, из-за этого получилось много объектов в одном и каждый ререндер был очень затратным. Спасибо.

[Petr_Mechik]

У вас зависает из-за цикла в логике рисования. Система считает ререндер новым объектом и плодит их тысячами каждый кадр.

Answer 1

[Collapse444]

document.body.style.overflow = "hidden";
const canvas = document.querySelector("canvas");
let canResize = true;
window.addEventListener("resize", function() {
    if (canResize) {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        render();
        canResize = false;
        setTimeout(() => canResize = true, 500);
    }
});