# Canvas Video Occasionally Stretched

**URL:** <https://devforum.zoom.us/t/canvas-video-occasionally-stretched/133219>\
**Category:** Web\
**Created:** [May 27, 2025, 3:16am UTC](https://devforum.zoom.us/t/canvas-video-occasionally-stretched/133219 "2025-05-27T03:16:36Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![lmtruong1512](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/lmtruong1512/32/59233_2.png) [@lmtruong1512](https://devforum.zoom.us/u/lmtruong1512)\
**Post date:** [May 27, 2025, 3:16am UTC](https://devforum.zoom.us/t/canvas-video-occasionally-stretched/133219/1 "2025-05-27T03:16:36Z")

</div>

**Description**  
On some devices (specifically on Windows with the Edge browser), rendering video onto a `<canvas>` occasionally results in a **stretched video**. Once stretched, the video **does not return to its correct state with stretched** , even after using `updateVideoCanvasDimension()`. The only way to fix it is to **stop and restart the camera**.

This is my code:

Canvas style:

```auto
<canvas id="pin_canvas_view" width="1024" height="907" style="width: 100%;height: 100%;background-color: transparent;object-fit: fill;" user-id="16778240"></canvas>

```

Render canvas:

```auto
      const canvasElement = document.getElementById(ViewIdentifiers.PIN_CANVAS_VIEW);
      canvasElement.setAttribute('user-id', userId);
      await stream.renderVideo(canvasElement, userId, canvasElement.width, canvasElement.height, 0, 0, quality);

```

Start camera:

```auto
      let videoOptions = {
        cameraId: cameraId,
        originalRatio: window.isMobile
      };

      if (state.mediaStream.isSupportVirtualBackground() && virtualBackground) {
        videoOptions.virtualBackground = { imageUrl: virtualBackground };
      }
      await state.mediaStream.startVideo(videoOptions);

```

**Can you help troubleshoot these session IDs:**  
`skUiaLguT4ebDfCVrJUDVg==`  
`N/qI+FOKSe+cKSwya0nxyw==`

Could the issue be caused by using `object-fit: fill` on the `<canvas>` element’s style, or is there likely another cause? How should I resolve this issue?

Thank you in advance for your help!

**Browser Console Error**  
N/A

**Which Web Video SDK version?**  
2.1.0

**Device:**

- Device: Window
- Browser: Edge

---

<div class="post-metadata">

**Author:** ![vic.yang](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/vic.yang/32/24656_2.png) [@vic.yang](https://devforum.zoom.us/u/vic.yang)\
**Post date:** [May 27, 2025, 5:47am UTC](https://devforum.zoom.us/t/canvas-video-occasionally-stretched/133219/2 "2025-05-27T05:47:42Z")

</div>

Hi @lmtruong1512

Thanks for your feedback.

> Could the issue be caused by using `object-fit: fill` on the `<canvas>` element’s style, or is there likely another cause?

This is possible.

When using canvas to render video, the width and height set on the canvas determine the actual number of pixels in the displayed content. If `object-fit: fill` is used, it will be affected by the container’s aspect ratio — if the aspect ratio doesn’t match, the video may appear stretched.

Thanks  
Vic

---

<div class="post-metadata">

**Author:** ![lmtruong1512](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/lmtruong1512/32/59233_2.png) [@lmtruong1512](https://devforum.zoom.us/u/lmtruong1512)\
**Post date:** [May 29, 2025, 8:08am UTC](https://devforum.zoom.us/t/canvas-video-occasionally-stretched/133219/3 "2025-05-29T08:08:39Z")

</div>

Hi @vic.yang,

We updated to `object-fit: contain`, but the canvas is still stretched. It doesn’t seem to be working. Do you have any suggestions for resolving or working around this issue while keeping using canvas?

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/6/1/614bdd549b610bbaa46ff934617683a02bdaa03c.png) [@system](https://devforum.zoom.us/u/system)\
**Post date:** [May 29, 2026, 8:09am UTC](https://devforum.zoom.us/t/canvas-video-occasionally-stretched/133219/4 "2026-05-29T08:09:21Z")

</div>

Closed on May 29, 2026, 8:09am UTC

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.