# Any way to resize the multiple canvases with avoiding blur issue

**URL:** <https://forum.babylonjs.com/t/any-way-to-resize-the-multiple-canvases-with-avoiding-blur-issue/35271>\
**Category:** Questions\
**Created:** [October 31, 2022, 8:31am UTC](https://forum.babylonjs.com/t/any-way-to-resize-the-multiple-canvases-with-avoiding-blur-issue/35271 "2022-10-31T08:31:40Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Narinder](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/narinder/32/27856_2.png) [@Narinder](https://forum.babylonjs.com/u/Narinder)\
**Post date:** [October 31, 2022, 8:31am UTC](https://forum.babylonjs.com/t/any-way-to-resize-the-multiple-canvases-with-avoiding-blur-issue/35271/1 "2022-10-31T08:31:40Z")

</div>

Hi, We are creating a preview of a camera in a separate canvas. Our requirement is to show small preview. But doing this main view gets blurred, and its also mentioned in the documents “multiple canvases on the same page should have the same size”

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

 ![Screenshot from 2022-10-31 13-46-20](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/f/8f34510a1cd3bf515395bf1c856171e86fd53717.png)

Is there any way to achieve similar functionality using BJS with avoiding blur issues, Please note that as we need to show it in a separate canvas we can’t use multiple viewports in a single canvas.

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [October 31, 2022, 9:10am UTC](https://forum.babylonjs.com/t/any-way-to-resize-the-multiple-canvases-with-avoiding-blur-issue/35271/2 "2022-10-31T09:10:09Z")

</div>

Does blur disappear if you resize this canvas container element?

---

<div class="post-metadata">

**Author:** ![Narinder](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/narinder/32/27856_2.png) [@Narinder](https://forum.babylonjs.com/u/Narinder)\
**Post date:** [October 31, 2022, 10:36am UTC](https://forum.babylonjs.com/t/any-way-to-resize-the-multiple-canvases-with-avoiding-blur-issue/35271/3 "2022-10-31T10:36:09Z")

</div>

No, Actually it won’t allow resizing the canvas directly, doing that automatically scales another canvas.  
So, We are trying to scale the container in the following way. And above image is the result of it.

```auto
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Multi Canvas Camera Demo</title>

		<style>
			html,
			canvas {
				width: 100%;
				height: 100%;
			}

			.mainContainer {
				width: 50%;
				height: 50%;
			}
			.previewContainer {
				width: 10%;
				height: 10%;
			}
		</style>
	</head>

	<body>
		<div id="root">
			<div class="mainContainer" id="mainContainer" touch-action="none"></div>
			<div class="previewContainer" id="previewContainer" touch-action="none"></div>
		</div>
		<script src="multi_canvas_camera_demo.js"></script>
	</body>
</html>

```

---

<div class="post-metadata">

**Author:** ![neu5](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/neu5/32/24720_2.png) [@neu5](https://forum.babylonjs.com/u/neu5)\
**Post date:** [October 31, 2022, 11:10am UTC](https://forum.babylonjs.com/t/any-way-to-resize-the-multiple-canvases-with-avoiding-blur-issue/35271/4 "2022-10-31T11:10:13Z")

</div>

Hey,  
It looks like the rendering is going on for the resolution of the “preview” component (smaller one). Can you try to switch them around? I guess if you could have higher resolution for bigger container and for the smaller one it wouldn’t be the issue?

---

<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:** [October 31, 2022, 11:54am UTC](https://forum.babylonjs.com/t/any-way-to-resize-the-multiple-canvases-with-avoiding-blur-issue/35271/5 "2022-10-31T11:54:05Z")

</div>

> [@Narinder](#):
>
> But doing this main view gets blurred, and its also mentioned in the documents “multiple canvases on the same page should have the same size”

In the doc, it is said multiple canvas should have the same size (as much as possible) for performance reasons. But it is possible to have multiple different sizes if you are willing to pay for some decreased performances =\> the blurring does not come from that.

Maybe your canvas.width / canvas.height dimensions are not the right one?

---

<div class="post-metadata">

**Author:** ![Narinder](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/narinder/32/27856_2.png) [@Narinder](https://forum.babylonjs.com/u/Narinder)\
**Post date:** [October 31, 2022, 12:11pm UTC](https://forum.babylonjs.com/t/any-way-to-resize-the-multiple-canvases-with-avoiding-blur-issue/35271/6 "2022-10-31T12:11:15Z")

</div>

@neu5 Yes, I tried to switch it by creating engine with a smaller canvas

```auto
var engine = new BABYLON.Engine(previewCanvas, true);

```

Now it’s working fine, I wonder why its taking a smaller canvas as an input. @Evgeni_Popov yes I agree with you about documentation.