# Multiple Canvas in Typescript

**URL:** <https://forum.babylonjs.com/t/multiple-canvas-in-typescript/18389>\
**Category:** Questions\
**Created:** [February 12, 2021, 3:08pm UTC](https://forum.babylonjs.com/t/multiple-canvas-in-typescript/18389 "2021-02-12T15:08:06Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Brett\_Ridel](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brett_ridel/32/5879_2.png) [@Brett\_Ridel](https://forum.babylonjs.com/u/Brett_Ridel)\
**Post date:** [February 12, 2021, 3:08pm UTC](https://forum.babylonjs.com/t/multiple-canvas-in-typescript/18389/1 "2021-02-12T15:08:06Z")

</div>

Hi all

I’m trying to update my engine to show multiple scene and multiple canvas (one scene by canvas).  
However, I got some issue during this update. That’s why I’m trying firstly to implement it in Playground.

I found the following existing Playground that I modified a bit: [https://playground.babylonjs.com/#L1TX4W#27](https://playground.babylonjs.com/#L1TX4W#27)

Then, I tried to translate it in Typescript. However, I don’t succeed to make it works : [https://playground.babylonjs.com/#LU92X9#18](https://playground.babylonjs.com/#LU92X9#18)

I suppose there is some concept I don’t understand or I don’t know. Can you help me to do so ?

Brett

---

<div class="post-metadata">

**Author:** ![PirateJC](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/piratejc/32/1003_2.png) [@PirateJC](https://forum.babylonjs.com/u/PirateJC)\
**Post date:** [February 12, 2021, 8:37pm UTC](https://forum.babylonjs.com/t/multiple-canvas-in-typescript/18389/2 "2021-02-12T20:37:13Z")

</div>

Perhaps @Evgeni_Popov can lend his expertise to this one?

---

<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:** [February 13, 2021, 3:17am UTC](https://forum.babylonjs.com/t/multiple-canvas-in-typescript/18389/3 "2021-02-13T03:17:30Z")

</div>

You just forgot to add `si = nofScene;` at the end of `refactorEngine`:

[https://playground.babylonjs.com/#LU92X9#19](https://playground.babylonjs.com/#LU92X9#19)

---

<div class="post-metadata">

**Author:** ![Brett\_Ridel](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brett_ridel/32/5879_2.png) [@Brett\_Ridel](https://forum.babylonjs.com/u/Brett_Ridel)\
**Post date:** [February 15, 2021, 10:49am UTC](https://forum.babylonjs.com/t/multiple-canvas-in-typescript/18389/4 "2021-02-15T10:49:29Z")

</div>

Thank you @Evgeni_Popov for the update, and sorry to not find it myself.

I updated my previous exemple because, as I said, I would like to use one engine with multiple canvas.

Here is the updated and working playground with 2 engines (the default one, plus ‘engine2’) and multiple canvas (the default one, plus the floatting-ones): [https://playground.babylonjs.com/#LU92X9#33](https://playground.babylonjs.com/#LU92X9#33)

Here is a non-working playground with 1 engine (only the default one) and multiple canvas : [https://playground.babylonjs.com/#LU92X9#34](https://playground.babylonjs.com/#LU92X9#34)  
As you can see in the last example, all the sub canvas show the same render as the main canvas.

Brett

---

<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:** [February 15, 2021, 12:25pm UTC](https://forum.babylonjs.com/t/multiple-canvas-in-typescript/18389/5 "2021-02-15T12:25:01Z")

</div>

There are two things:

- you should stop the default render loop before setting a new one
- the canvas size is not correctly taken into account when rendering in the view canvas =\> problem in the engine

[https://playground.babylonjs.com/#LU92X9#37](https://playground.babylonjs.com/#LU92X9#37)

I have overcome the second problem by overriding the `engine.resize` method. However, I think we will need to find a better solution for this one.

To @Deltakosh:

The multi canvas code is doing this to set the parent canvas size to the size of the current view canvas:

```javascript
parent.width = canvas.clientWidth;
parent.height = canvas.clientHeight;
this.resize(true);

```

Then, `engine.resize` is doing:

```auto
public resize(forceSetSize = false): void {
    let width: number;
    let height: number;

    if (DomManagement.IsWindowObjectExist()) {
        width = this._renderingCanvas ? (this._renderingCanvas.clientWidth || this._renderingCanvas.width) : window.innerWidth;
        height = this._renderingCanvas ? (this._renderingCanvas.clientHeight || this._renderingCanvas.height) : window.innerHeight;
    } else {
        width = this._renderingCanvas ? this._renderingCanvas.width : 100;
        height = this._renderingCanvas ? this._renderingCanvas.height : 100;
    }

    this.setSize(width / this._hardwareScalingLevel, height / this._hardwareScalingLevel, forceSetSize);
}

```

The thing is that `this._renderingCanvas.clientWidth` (and `clientHeight`) is still the old main canvas size, it is not updated with the value we set in `width` yet: I think it’s because we would need a roundtrip to the browser so that it updates `clientWidth` with the right value? So, we end up having the main rendering canvas still the same size and not updated with our view canvas size.

Maybe we should simply pass to `engine.resize` the width/height values we want to set when called from the multi view canvas code?

---

<div class="post-metadata">

**Author:** ![Brett\_Ridel](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brett_ridel/32/5879_2.png) [@Brett\_Ridel](https://forum.babylonjs.com/u/Brett_Ridel)\
**Post date:** [February 16, 2021, 2:25pm UTC](https://forum.babylonjs.com/t/multiple-canvas-in-typescript/18389/6 "2021-02-16T14:25:34Z")

</div>

Thank you @Evgeni_Popov  
I set my current issue as solved and continue to play with multi canvas