Currently, I have a div that includes a three.js canvas. My goal is to maintain the ratio and position of the content within the canvas when its size changes.
https://i.sstatic.net/ZOj9n.png
I have attempted the following:
window.addEventListener('resize', onWindowResize, false);
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
However, this code only works when the window is resized, not when the canvas itself is resized. I have also tried modifying the code with the canvas width and height, but it did not produce the desired results.