# Hardware scaling issues when using multi canvases rendering

**URL:** <https://forum.babylonjs.com/t/hardware-scaling-issues-when-using-multi-canvases-rendering/19184>\
**Category:** Questions\
**Tags:** engine\
**Created:** [March 15, 2021, 10:01am UTC](https://forum.babylonjs.com/t/hardware-scaling-issues-when-using-multi-canvases-rendering/19184 "2021-03-15T10:01:35Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![tiwence](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tiwence/32/29819_2.png) [@tiwence](https://forum.babylonjs.com/u/tiwence)\
**Post date:** [March 15, 2021, 10:01am UTC](https://forum.babylonjs.com/t/hardware-scaling-issues-when-using-multi-canvases-rendering/19184/1 "2021-03-15T10:01:36Z")

</div>

Hi there,

I followed the following documentation to implement multi canvases rendering with one engine, one scene, and two cameras.

But I face a scaling problem when the engine is rendering the scene, I am unable to set a proper hardware scaling without strange behaviour.

For instance :

```auto
const canvas = document.createElement('canvas')
this.engine = new BABYLON.Engine(canvas, true, {}, false)
this.engine.inputElement = document.getElementById('renderCanvas1')

```

When creating scene :

```auto
this.engine.registerView(document.getElementById('renderCanvas1'), camera1)
this.engine.registerView(document.getElementById('renderCanvas2'), camera2)

```

And when I set the engine hardware scaling level to improve rendering quality :

```auto
this.engine.setHardwareScalingLevel(1 / window.devicePixelRatio)

```

The engine render size increased by 3 (because the devicePixelRatio of my device is 3), and it is unable to display the scene properly in the targeted canvas.

Do you have any idea to improve the rendering quality in multi canvases scene ?

Thank’s a lot for your help

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [March 15, 2021, 10:34am UTC](https://forum.babylonjs.com/t/hardware-scaling-issues-when-using-multi-canvases-rendering/19184/2 "2021-03-15T10:34:07Z")

</div>

I think for this to work you will need to multiply the width/height of the view canvas by `window.devicePixelRatio` so that they end up being the same size than the rendering canvas (the one passed to the engine, which is rescaled when you call `setHardwareScalingLevel`).

---

<div class="post-metadata">

**Author:** ![tiwence](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tiwence/32/29819_2.png) [@tiwence](https://forum.babylonjs.com/u/tiwence)\
**Post date:** [March 15, 2021, 12:11pm UTC](https://forum.babylonjs.com/t/hardware-scaling-issues-when-using-multi-canvases-rendering/19184/3 "2021-03-15T12:11:17Z")

</div>

Thank’s for your quick reply.

I tried your tip by increasing the size of each rendered canvas, but I observe the same issue as described.

Maybe, there is a better timing to apply

```auto
this.engine.setHardwareScalingLevel(1 / window.devicePixelRatio) 

```

?

I observe the same issue in a blank playground.

Maybe I have to resize the parent node width and height of each rendering canvas to fit the screen size ?

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [March 15, 2021, 1:06pm UTC](https://forum.babylonjs.com/t/hardware-scaling-issues-when-using-multi-canvases-rendering/19184/4 "2021-03-15T13:06:48Z")

</div>

Can you setup a repro in the Playground? It will be easier to help.

---

<div class="post-metadata">

**Author:** ![tiwence](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tiwence/32/29819_2.png) [@tiwence](https://forum.babylonjs.com/u/tiwence)\
**Post date:** [March 15, 2021, 1:35pm UTC](https://forum.babylonjs.com/t/hardware-scaling-issues-when-using-multi-canvases-rendering/19184/5 "2021-03-15T13:35:21Z")

</div>

Yes of course,

I pick up an another playground from community to illustrate my problem. In the multicanvas function, if you update the scaling level of the engine, you’ll see the difference of display in the second canvas.

I notice that the problem occured only when using registered view on a specific canvas.

[https://playground.babylonjs.com/#IDV1K2#31](https://playground.babylonjs.com/#IDV1K2#31)

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [March 15, 2021, 3:30pm UTC](https://forum.babylonjs.com/t/hardware-scaling-issues-when-using-multi-canvases-rendering/19184/6 "2021-03-15T15:30:48Z")

</div>

This PR should correct the problem:

> <https://github.com/BabylonJS/Babylon.js/pull/10055>

This PG should work once the PR is merged:

[https://playground.babylonjs.com/#IDV1K2#51](https://playground.babylonjs.com/#IDV1K2#51)