Sizing/Resizing canvas

Questions
1

What is the preferred way of setting the rendering canvas size to be used for Babylon.js scene? I have issues probably with sizing.

In the first opening of the page the canvas is not visible. When I inspect it from the developer tools I see the width and height attributes are set 0.

I use the canvas in an app inside another HTMLElement. I want canvas to be as wide and high as that HTMLElement. Most of the examples in the playground are setting the canvas size by its attributes, hence to pixels. But what I need is the full width and height of the parent element of the canvas.

I have tried setting percentage values in css it did not work. The attributes does not accept percentage values, they are regarded as pixels anyway.

How can I achieve this properly?

2

Hey, the best example is I think exactly the playground
https://playground.babylonjs.com/
If you inspect it. you’ll see the canvas is inside a div which is inside other div and so on.
It should work with setting width and height at 100% in css for canvas. The values you are seeing as width and height for canvas inline are added by the browser, not by user. You have to set it in css. Hope this help.

If still not work maybe if you can share your scene somewhere you’ll get more help. Cheers!

1 Like
3

I will examine that and try. Then I will reply again with the results. Thanks a lot.

1 Like
4

You can add a window size finder function:

windowResizeListener = () => {
let windowW, windowH;
windowW = window.innerWidth;
windowH = window.innerHeight;
// console.log("listener : " + windowW + " , " + windowH);
}