How to properly redraw the canvas when the window is resized?

Question

JavaScript

There is an animated grid of dots .

When resizing a window, the canvas does not shrink to the size of the window, but simply shrinks, as a result of which the grid is distorted and the cursor position is incorrectly registered.
How can this be fixed?

Add. offhand question - how to change canvas background color to completely transparent?

Answer 1

You yourself set the size in vh / vw and they are, by definition, a percentage of the window size.
Make in px or at least in em
canvas the same element as the others, set the style to background:transparent; or opacity:XXX;