Resize canvas inside vue project with header and footer

Questions
1

Ciao, I’m trying to resize the canvas that is not as big as the entire viewport, because I have a toobar at the top and a status bar at the bottom. If I reload the page the canvas is ok, but if I try with

window.addEventListener(‘resize’, () => {

        this.engine?.resize();

    });

sometime the canvas is not resized correctly, it seems keeping the same aspect ratio it had before. In the css I have

#container {

background-size:100% 100%;

width:100%;

height:100%;

outline: none;

}

#renderCanvas {

width:100%;

height:100%;

}

Can you help me on this?

2

It is all based on css to define the size so without a repro it will be really hard to help on this one :frowning:

3

@Toni_Bruno this is more of a Vue.js problem, borrow from one of these projects … How to use BabylonJS with Vue | Babylon.js Documentation

1 Like