Threejs canvas size based on container

Question

How can I calculate canvas size based on its container? To avoid scrolling.

If I set the size based on window the canvas is too big.

Answer 1

Of course the answer provided by @gman is the full-fledged answer. However, to recap the possible scenarios, one has to assume the two possibilities, which is the reason why the answers differ drastically.

The first possibility is when the container is the global(head) object: window, or maybe or , in which case, the most convenient method would be using window.addEventListener('resize', onResize()) { ... }.

The second possibility, is the one which has been originally asked: when the container of the Three.js WebGL output should be responsive. In that case, whether the container is canvas, a section or a div, the best way to handle the resizing is to target the container in DOM, and use the renderer.setsize() method by passing it the container's clientWidth and clientHeight, and then calling onResize() function in the render loop function, which its complete implementation is aforementioned by @gman. In this particular case, there is no need to use addEventListener.