Fix canvas height about breethe-client HOT 1 OPEN

We merged #107 to solve this issue. But whether that is enough to close this issue is up for discussion.

The problem occurs because the canvas is drawn at specific dimensions when it's initialized. When FogBackground is inserted in the DOM, it draws the particles based on the current page size. We have no way to tell if the page has changes size to adjust the canvas animation.

We could somehow observe this change, perhaps using ResizeObserver or an heuristic (ie. updating the canvas size on route change or when the particles intensity changes).

However, there are two complexities. If the new area is bigger, there will be an uneven distribution of particles in the canvas on such change: the new canvas area will have to wait a few seconds for the particles to fill it. If the area is smaller, the position of some particles may become invalid and would require new calculations.

The current solution uses position: fixed to avoid this problem because the background moves with the scroll. It has some room for improvement to guarantee that there will be no space in which the background is rendered if the page grows. A side benefit it has is that it renders exactly what it needs, while adjusting the height of the canvas would render non-visible areas as well.

Whether we keep the position fixed or go for a more sophisticated solution depends, I'd say, on subtle differences in the user experience.

from breethe-client.