# Anyone know how to change the scene ratio using react-babylonjs?

**URL:** <https://forum.babylonjs.com/t/anyone-know-how-to-change-the-scene-ratio-using-react-babylonjs/36970>\
**Category:** Questions\
**Tags:** react, gui, camera, canvas, scene\
**Created:** [December 29, 2022, 4:48am UTC](https://forum.babylonjs.com/t/anyone-know-how-to-change-the-scene-ratio-using-react-babylonjs/36970 "2022-12-29T04:48:45Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Chaitanya\_Yanamala](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/chaitanya_yanamala/32/26227_2.png) [@Chaitanya\_Yanamala](https://forum.babylonjs.com/u/Chaitanya_Yanamala)\
**Post date:** [December 29, 2022, 4:48am UTC](https://forum.babylonjs.com/t/anyone-know-how-to-change-the-scene-ratio-using-react-babylonjs/36970/1 "2022-12-29T04:48:45Z")

</div>

Here is our babylon scene in the right side which is in the landscape ratio. We want it to be in portrait style like the one picture in the left side. @brianzinn

 ![Screenshot 2022-12-29 101048](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/e/5/e543a8b6e83887ec0493aa1e9582843cb8dc7bc2.jpeg)

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [December 29, 2022, 1:40pm UTC](https://forum.babylonjs.com/t/anyone-know-how-to-change-the-scene-ratio-using-react-babylonjs/36970/2 "2022-12-29T13:40:40Z")

</div>

The ratio of the Babylon scene will be the ratio of the canvas so just change the canvas size

---

<div class="post-metadata">

**Author:** ![Chaitanya\_Yanamala](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/chaitanya_yanamala/32/26227_2.png) [@Chaitanya\_Yanamala](https://forum.babylonjs.com/u/Chaitanya_Yanamala)\
**Post date:** [December 30, 2022, 5:11am UTC](https://forum.babylonjs.com/t/anyone-know-how-to-change-the-scene-ratio-using-react-babylonjs/36970/3 "2022-12-30T05:11:08Z")

</div>

Hi @carolhmj

Do you mean I need to change the canvas.style.width .

Below is the code where width and height changed in percent.

```auto
  function onSceneMount(e: any) {
    const { canvas, scene } = e;
    scene.clearColor = new Color4(3, 1, 1);

    setScene(scene);
    canvas.style.width = "100%";
    canvas.style.height = "100%";
  }

```

---

<div class="post-metadata">

**Author:** ![Chaitanya\_Yanamala](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/chaitanya_yanamala/32/26227_2.png) [@Chaitanya\_Yanamala](https://forum.babylonjs.com/u/Chaitanya_Yanamala)\
**Post date:** [December 30, 2022, 5:30am UTC](https://forum.babylonjs.com/t/anyone-know-how-to-change-the-scene-ratio-using-react-babylonjs/36970/4 "2022-12-30T05:30:21Z")

</div>

Thank you @carolhmj

The below code is working fine. But the objects inside are geting thinner or squeezed according to canvas size. The images below with 1000px width and 200px width.

```auto
 function onSceneMount(e: any) {
    const { canvas, scene } = e;
    scene.clearColor = new Color4(3, 1, 1);

    setScene(scene);
    canvas.style.width = 200 + "px";
    canvas.style.height = 800 + "px";
  }

```

 ![200px](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/1/812f36206aec2c61e03791b431d77e038907e5be.png)  
 ![1000px](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/7/c/7cee61dcddc843d177b45065140d039be7201861.png)

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [December 30, 2022, 10:28am UTC](https://forum.babylonjs.com/t/anyone-know-how-to-change-the-scene-ratio-using-react-babylonjs/36970/5 "2022-12-30T10:28:05Z")

</div>

You need to add a resize listener in your canvas, see the example [Getting Started - Chapter 1 - Setup Your First Web App | Babylon.js Documentation (babylonjs.com)](https://doc.babylonjs.com/features/introductionToFeatures/chap1/first_app)

---

<div class="post-metadata">

**Author:** ![Chaitanya\_Yanamala](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/chaitanya_yanamala/32/26227_2.png) [@Chaitanya\_Yanamala](https://forum.babylonjs.com/u/Chaitanya_Yanamala)\
**Post date:** [December 30, 2022, 12:18pm UTC](https://forum.babylonjs.com/t/anyone-know-how-to-change-the-scene-ratio-using-react-babylonjs/36970/6 "2022-12-30T12:18:53Z")

</div>

Thank you @carolhmj below code is working for me.

````auto
    if (scene) {
      scene.getEngine().runRenderLoop(() => {
        if (scene) {
          scene.render();
          scene.getEngine().resize();
        }
      });
    }
  }, [scene]);```
````

---

<div class="post-metadata">

**Author:** ![brianzinn](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brianzinn/32/28013_2.png) [@brianzinn](https://forum.babylonjs.com/u/brianzinn)\
**Post date:** [December 30, 2022, 3:47pm UTC](https://forum.babylonjs.com/t/anyone-know-how-to-change-the-scene-ratio-using-react-babylonjs/36970/7 "2022-12-30T15:47:55Z")

</div>

You don’t need to resize in the render loop. Once after you explicitly set it ought to be enough. I commented out a ResizeObserver on the canvas element for some reason. Would you mind testing @Chaitanya_Yanamala if a new version fixes that?

---

<div class="post-metadata">

**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\
**Post date:** [December 31, 2022, 3:09pm UTC](https://forum.babylonjs.com/t/anyone-know-how-to-change-the-scene-ratio-using-react-babylonjs/36970/8 "2022-12-31T15:09:29Z")

</div>

> [@Chaitanya\_Yanamala](#):
>
> Do you mean I need to change the canvas.style.width .

Just a note to say there is a difference between using canvas.style.width and canvas.width

See [\<canvas\>: The Graphics Canvas element - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas#sizing_the_canvas_using_css_versus_html)

and

> <https://stackoverflow.com/questions/4938346/canvas-width-and-height-in-html5>

---

<div class="post-metadata">

**Author:** ![Chaitanya\_Yanamala](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/chaitanya_yanamala/32/26227_2.png) [@Chaitanya\_Yanamala](https://forum.babylonjs.com/u/Chaitanya_Yanamala)\
**Post date:** [January 2, 2023, 5:29am UTC](https://forum.babylonjs.com/t/anyone-know-how-to-change-the-scene-ratio-using-react-babylonjs/36970/9 "2023-01-02T05:29:02Z")

</div>

Okay sure I will check it out.