Как правильно перерисовать canvas при ресайзе окна?

Question

[chegcheg]

Есть анимированная сетка из точек.

При ресайзе окна canvas не уменьшается под размер окна, а просто сжимается, в следствие чего искажается сетка и некорректно регистрируется положение курсора.
Как это можно исправить?

Доп. вопрос на вскидку - как изменить фоновый цвет canvas на полностью прозрачный?

Comments

[RAX7]

Так как и в примере отсюда Как добавить easing для элементов в canvas?
Посмотри что делает функция onresize и сделай также.

[chegcheg]

RAX7, поменял
document.addEventListener("resize", function () {
на
window.addEventListener("resize", function () {

Не подскажешь - почему на document не срабатывает обработчик?

[RAX7]

chegcheg,

Однако, событие resize запускается только на объекте window. Только обработчики, зарегистрированные на объекте window, будут получать события resize.
https://developer.mozilla.org/ru/docs/Web/API/Wind...

Answer 1

[rPman]

Ты же сам задал размер в vh/vw а они по определению процент от размера окна.
Делай в px или хотя бы в em

canvas такой же элемент как и другие, устанавливайте стиль background:transparent; или opacity:XXX;

Comments

[chegcheg]

Для начала разберись с сутью вопроса. По CSS не было ни слова

[rPman]

дана ссылка, там стоят vh/vm

не уменьшается под размер окна, а просто сжимается, в следствие чего искажается сетка

именно по этой причине это и происходит
физический размер в пикселах у канваса сам не будет меняться и это правильно, его придется ресайзить самостоятельно