# Two different size canvases issue

**URL:** <https://forum.babylonjs.com/t/two-different-size-canvases-issue/15852>\
**Category:** Questions\
**Created:** [November 19, 2020, 2:36pm UTC](https://forum.babylonjs.com/t/two-different-size-canvases-issue/15852 "2020-11-19T14:36:33Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gugis](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/gugis/32/7958_2.png) [@Gugis](https://forum.babylonjs.com/u/Gugis)\
**Post date:** [November 19, 2020, 2:36pm UTC](https://forum.babylonjs.com/t/two-different-size-canvases-issue/15852/1 "2020-11-19T14:36:34Z")

</div>

I have a page with two canvases. Large canvas is main canvas (passed to engine constructor) and canvas on the left side is registered view.

```
const view = engine.registerView(canvas, camera);

```

As you see main canvas becomes streched. It renders view from second canvas just scaled up.

 ![multi canvas](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/d/d636ebbff9c3c19138de5e40278bdb713ed4a748.jpeg)  
So I have hidden this ugly large canvas and replaced it with another registered view. Now I have 3 canvases: main which is hidden and 2 registered views.  
 ![multi canvas 2](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/6/69c33ddc889f0fc05885ad7b2a00ea7b9d5c21d0.jpeg)  
It looks much better, but there’s still a problem. It behaves not as expected. I try to pick mesh with scene.pick method, but whenever I click on canvas it wont pick any mesh. When I check scene.pointerX and scene.pointerY it always returns 0, 0.  
Any ideas how to fix this?

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [November 19, 2020, 5:06pm UTC](https://forum.babylonjs.com/t/two-different-size-canvases-issue/15852/2 "2020-11-19T17:06:59Z")

</div>

Do you mind reproducing the issue in the PG or on jsfiddle?  
(your game looks great btw)

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [November 19, 2020, 5:08pm UTC](https://forum.babylonjs.com/t/two-different-size-canvases-issue/15852/3 "2020-11-19T17:08:40Z")

</div>

For your picking issue, make sure to do this:

> **[Using Multiple Canvases | Babylon.js Documentation](https://doc.babylonjs.com/divingDeeper/scene/multiCanvas#events)**
>
> Learn about using multiple canvases at the same time in Babylon.js.

---

<div class="post-metadata">

**Author:** ![Gugis](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/gugis/32/7958_2.png) [@Gugis](https://forum.babylonjs.com/u/Gugis)\
**Post date:** [November 19, 2020, 7:42pm UTC](https://forum.babylonjs.com/t/two-different-size-canvases-issue/15852/4 "2020-11-19T19:42:18Z")

</div>

Hey @Deltakosh thanks alot 🙂  
Changing input element helped a little bit, at least now I’m getting real pointer coordinates. Unfortunately results returned by pick method is slightly off. It looks like scene picking ray is being projected from the last registered view. I can’t explain it acuratelly but if I register the big canvas last then everything is fine. It would be OK if view registration order would be always constant, but it’s not. Views registered dynamically and depends on other processes.  
I tried to replicate current state in Playground, but it behaves strangley with multiple canvas. I’ll try to do it on different online platform.