# Screen sharing aspect ratio bug

**URL:** <https://devforum.zoom.us/t/screen-sharing-aspect-ratio-bug/78759>\
**Category:** Web\
**Created:** [November 14, 2022, 10:56am UTC](https://devforum.zoom.us/t/screen-sharing-aspect-ratio-bug/78759 "2022-11-14T10:56:09Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![efron.vit](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/efron.vit/32/33711_2.png) [@efron.vit](https://devforum.zoom.us/u/efron.vit)\
**Post date:** [November 14, 2022, 10:56am UTC](https://devforum.zoom.us/t/screen-sharing-aspect-ratio-bug/78759/1 "2022-11-14T10:56:09Z")

</div>

Hi!  
The method of sharing the screen demonstration stretches the image. It may be correct for the client to display the original image. Because of this behavior, we have inconsistencies in the implementation of drawing tools on canvas.

host:

 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/5/f/5fcdb028beeeb74b5cf8d8666fb10c51718a63e1.png)

client:

 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/b/8/b86b32d3ee8a6e49641f834642e47cd4b77c4a10.jpeg)

web video sdk 1.5.0.

---

<div class="post-metadata">

**Author:** ![rehema.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/rehema.zoom/32/40323_2.png) [@rehema.zoom](https://devforum.zoom.us/u/rehema.zoom)\
**Post date:** [November 15, 2022, 6:30pm UTC](https://devforum.zoom.us/t/screen-sharing-aspect-ratio-bug/78759/2 "2022-11-15T18:30:17Z")

</div>

Hi @efron.vit ,

Thank you for your post! Could you share your code snippet for this functionality?

Thanks,  
Rehema

---

<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:** [November 16, 2022, 7:02am UTC](https://devforum.zoom.us/t/screen-sharing-aspect-ratio-bug/78759/3 "2022-11-16T07:02:50Z")

</div>

Hey @efron.vit

Thanks for your feedback.

The Video SDK provides the `share-content-dimension-change` event to get the shared content dimension, on the client side, you can use the `stream.updateSharingCanvasDimension` method to update the canvas size.

Thanks  
Vic

---

<div class="post-metadata">

**Author:** ![efron.vit](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/efron.vit/32/33711_2.png) [@efron.vit](https://devforum.zoom.us/u/efron.vit)\
**Post date:** [November 23, 2022, 7:56am UTC](https://devforum.zoom.us/t/screen-sharing-aspect-ratio-bug/78759/4 "2022-11-23T07:56:15Z")

</div>

Thank you, it helped!

---

<div class="post-metadata">

**Author:** ![nguyen.hoangtue](https://avatars.discourse-cdn.com/v4/letter/n/13edae/32.png) [@nguyen.hoangtue](https://devforum.zoom.us/u/nguyen.hoangtue)\
**Post date:** [December 22, 2022, 4:52am UTC](https://devforum.zoom.us/t/screen-sharing-aspect-ratio-bug/78759/5 "2022-12-22T04:52:38Z")

</div>

@efron.vit  
@vic.yang  
Hi,  
I’m using `stream.updateSharingCanvasDimension ` method to update the canvas size but it’s still have ratio bug

 ![Screenshot 2022-12-22 at 13.59.56](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/2/f/2ffb7b84205ce300813dc734bff60f76b689945a.jpeg)

When resize the browser, the canvas size have been updated

 ![Screenshot 2022-12-22 at 14.00.29](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/1/b/1bb21d315f068e2469aea04bb6f4808bbe72f67a.jpeg)

## Video sdk version

V. 1.5.5

## Code Snipet

JS file

```auto
shareScreenElement.style.borderTopRightRadius = '0px';
this.updateCanvasStyleSize(shareScreenElement, bodyWidth, bodyHeight);
await this.updateSharingView(bodyWidth, bodyHeight);

receiveScreenElement.style.borderTopRightRadius = '0px';
console.log('RECEIVE SCREEN ELEMENT UPDATE STYLE');
this.updateCanvasStyleSize(receiveScreenElement, bodyWidth, bodyHeight);

```

HTML file

```auto
<canvas
	v-show="isSharingView && !isShareScreen"
	id="receive-sharing-screen-element"
	:width="miniSize.width"
	:height="miniSize.height"
	:class="sharingElementClass"
></canvas>

```

---

<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:** [December 22, 2022, 7:37am UTC](https://devforum.zoom.us/t/screen-sharing-aspect-ratio-bug/78759/6 "2022-12-22T07:37:06Z")

</div>

Hey @nguyen.hoangtue

Did you get the width and height value from the payload of the `share-content-dimension-change` event?

Thanks  
Vic

---

<div class="post-metadata">

**Author:** ![nguyen.hoangtue](https://avatars.discourse-cdn.com/v4/letter/n/13edae/32.png) [@nguyen.hoangtue](https://devforum.zoom.us/u/nguyen.hoangtue)\
**Post date:** [December 22, 2022, 10:02am UTC](https://devforum.zoom.us/t/screen-sharing-aspect-ratio-bug/78759/7 "2022-12-22T10:02:36Z")

</div>

@vic.yang  
Thank you for reply  
Yes. I got the with and height value

## Code snipet

```auto
updateCanvasStyleSize(canvas, width, height) {
	console.log('updateCanvasStyleSize', canvas, width, height);
	try {
		canvas.style.width = `${width}px`;
		canvas.style.height = `${height}px`;
	} catch (e) {
		console.log(e);
	}
},

```

 ![Screenshot 2022-12-22 at 19.00.01](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/a/5/a5338746e69cd8519cf5a6ae1f33a088086ae66c.jpeg)  
 ![Screenshot 2022-12-22 at 19.00.49](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/5/0/50331f8d90d26378bf11dff2e6e6b546648ddbab.png)

---

<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:** [December 22, 2022, 2:15pm UTC](https://devforum.zoom.us/t/screen-sharing-aspect-ratio-bug/78759/8 "2022-12-22T14:15:27Z")

</div>

Hey @nguyen.hoangtue

Could you call the `stream. updateSharingCanvasDimension(width, height)` method to update the width/height attribute of the canvas?

A gentle reminder, the styled width/height is different from the attribute width/height of the canvas.

Thanks  
Vic

---

<div class="post-metadata">

**Author:** ![j.schoenemeyer](https://avatars.discourse-cdn.com/v4/letter/j/f9ae1b/32.png) [@j.schoenemeyer](https://devforum.zoom.us/u/j.schoenemeyer)\
**Post date:** [December 22, 2022, 7:40pm UTC](https://devforum.zoom.us/t/screen-sharing-aspect-ratio-bug/78759/9 "2022-12-22T19:40:58Z")

</div>

try

```auto
updateCanvasStyleSize(canvas, width, height) {
	console.log('updateCanvasStyleSize', canvas, width, height);
	try {
		canvas.width = width;
		canvas.height = height;
	} catch (e) {
		console.log(e);
	}
},

```

does this give a different result?

---

<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:** [January 22, 2023, 5:41am UTC](https://devforum.zoom.us/t/screen-sharing-aspect-ratio-bug/78759/10 "2023-01-22T05:41:12Z")

</div>

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