Resize canvas inside vue project with header and footer

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’, () => {



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%;



outline: none;


#renderCanvas {




Can you help me on this?

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:

@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