# Resize canvas with different aspect ratio

**URL:** <https://discourse.threejs.org/t/resize-canvas-with-different-aspect-ratio/42439>\
**Category:** Questions\
**Tags:** resizing\
**Created:** [September 11, 2022, 5:33pm UTC](https://discourse.threejs.org/t/resize-canvas-with-different-aspect-ratio/42439 "2022-09-11T17:33:15Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![HasanTheSyrian](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hasanthesyrian/32/29432_2.png) [@HasanTheSyrian](https://discourse.threejs.org/u/HasanTheSyrian)\
**Post date:** [September 11, 2022, 5:33pm UTC](https://discourse.threejs.org/t/resize-canvas-with-different-aspect-ratio/42439/1 "2022-09-11T17:33:15Z")

</div>

I want to resize the canvas but keep the aspect ratio of the object. When I make the canvas ~9:16 it distorts.

[![](https://i.imgur.com/061VwHr.gif) ](https://i.imgur.com/061VwHr.gif)

I have the usual

```javascript
const canvas = document.getElementById("three");

const scene = new THREE.Scene();

const renderer = new THREE.WebGLRenderer({
  antialias: true,
  canvas: canvas,
  //? set the renderer's background to be transparent
  alpha: true,
});
// const canvas = document.body.appendChild(renderer.domElement);

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

window.addEventListener("resize", onWindowResize, false);

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(window.innerWidth, window.innerHeight);
}

```

I tried setting the camera aspect ratio to the canvas’ width and height like in [here](https://discourse.threejs.org/t/3d-object-becomes-deformd-when-resizing-the-canvas/30029), but that didn’t work.

---

<div class="post-metadata">

**Author:** ![lolia](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lolia/32/19362_2.png) [@lolia](https://discourse.threejs.org/u/lolia)\
**Post date:** [September 11, 2022, 5:40pm UTC](https://discourse.threejs.org/t/resize-canvas-with-different-aspect-ratio/42439/2 "2022-09-11T17:40:24Z")

</div>

Hi

```nohighlight
 window.addEventListener("resize", onWindowResize());
    

    onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
         camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }
```

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [September 11, 2022, 6:01pm UTC](https://discourse.threejs.org/t/resize-canvas-with-different-aspect-ratio/42439/3 "2022-09-11T18:01:08Z")

</div>

> [@HasanTheSyrian](#):
>
> `window.addEventListener("resize", onWindowResize, false);`

You resize something, but window, so the event doesn’t fire. 🤔  
Also, you need to take in count not window size, but the size of renderer. If I got correctly, what you’re trying to achieve.

---

<div class="post-metadata">

**Author:** ![HasanTheSyrian](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hasanthesyrian/32/29432_2.png) [@HasanTheSyrian](https://discourse.threejs.org/u/HasanTheSyrian)\
**Post date:** [September 11, 2022, 6:06pm UTC](https://discourse.threejs.org/t/resize-canvas-with-different-aspect-ratio/42439/4 "2022-09-11T18:06:01Z")

</div>

I did try adding the event listener to the canvas before posting, also didn’t work; if that’s what you mean.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [September 11, 2022, 6:18pm UTC](https://discourse.threejs.org/t/resize-canvas-with-different-aspect-ratio/42439/5 "2022-09-11T18:18:46Z")

</div>

Do you change canvas size with code?  
So after `renderer.setSize(desiredWidth, desiredHeight);`  
add

```javascript
camera.aspect = desiredWidth / desiredHeight;
camera.updateProjectionMatrix();

```

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [September 11, 2022, 6:45pm UTC](https://discourse.threejs.org/t/resize-canvas-with-different-aspect-ratio/42439/6 "2022-09-11T18:45:16Z")

</div>

Listening for size changes of a dom element is difficult, as well as @prisoner849 suggestion you can use the [observer api](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)

---

<div class="post-metadata">

**Author:** ![HasanTheSyrian](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hasanthesyrian/32/29432_2.png) [@HasanTheSyrian](https://discourse.threejs.org/u/HasanTheSyrian)\
**Post date:** [September 12, 2022, 10:48am UTC](https://discourse.threejs.org/t/resize-canvas-with-different-aspect-ratio/42439/7 "2022-09-12T10:48:25Z")

</div>

This is how I fixed it (the height was incorrect maybe because it was getting inquired before it changed)

```javascript
const canvas = document.getElementById("three");
function getWidth() {
  return parseInt(window.getComputedStyle(canvas).width);
}

function getHeight() {
  return parseInt(window.getComputedStyle(canvas).height);
}
//? core
const scene = new THREE.Scene();

const renderer = new THREE.WebGLRenderer({
  antialias: true,
  canvas: canvas,
  //? set the renderer's background to be transparent
  alpha: true,
});

const camera = new THREE.PerspectiveCamera(75, getWidth() / getHeight(), 0.1, 1000);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

addEventListener("resize",() => {
    camera.aspect = getWidth() / getHeight();
    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);
},false);

```

I ran into another issue though, the camera doesn’t fit the whole object now.

[![](https://i.imgur.com/EzIofkw.gif) ](https://i.imgur.com/EzIofkw.gif)

---

<div class="post-metadata">

**Author:** ![rrrr\_rrrr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rrrr_rrrr/32/7697_2.png) [@rrrr\_rrrr](https://discourse.threejs.org/u/rrrr_rrrr)\
**Post date:** [September 12, 2022, 1:46pm UTC](https://discourse.threejs.org/t/resize-canvas-with-different-aspect-ratio/42439/8 "2022-09-12T13:46:41Z")

</div>

[Aspect.html](https://discourse.threejs.org/uploads/short-url/wx5G0uE68uIqtFIc8skpFPiMVNg.html) (4.7 KB)