Unable to Set Background Color of an HTMLCanvasElement

[lmtruong1512 (TruongLM)]

Description

I created an HTMLCanvasElement to render multiple videos on the canvas. I want to set the background color of the canvas element to be transparent, so I set the style backgroundColor to 'transparent', but it is not working on some browsers.

I tried to use the 2D context as suggested in (javascript - How to fill the whole canvas with specific color? - Stack Overflow) to set the canvas background, but it didn’t work. It threw the following error:

DOMException: Failed to execute 'getContext' on 'HTMLCanvasElement': Cannot get context from a canvas that has transferred its control to offscreen.

This also mentioned in this thread:

Cannot get context for html canvas element (want to add text etc)

Description Is there a way I can access the context for the canvas that the Zoom SDK uses to render videos? I am rendering on a canvas with the ID “video-canvas” I want to do something like var c = document.getElementById("video-canvas"); var ctx = c.getContext("2d"); so i can add names to the video strings or perhaps draw boxes for users with disabled cameras. However, when I try the above, I get following error: Browser Console Error Uncaught (in promise) DOMException: Failed to exec…

How can I fix this? Is there any way in VideoSDK that I can use to resolve this issue?

Video SDK version

1.11.10

Evident

In the image above, I tried to set the background color to ‘red’, but it didn’t work.

Devices:

• MacMini M1:
  + Browser: Brave - Version 1.67.123 Chromium: 126.0.6478.126
• Macbook Pro 13 inch:
  + Chrome

[vic.yang (Vic)]

Hey @lmtruong1512

Thanks for your feedback.

The parts of the canvas where no video is rendered are transparent. Could you check if there is a black background set somewhere else?

Thanks
Vic

[lmtruong1512 (TruongLM)]

Hi Vic,

Thanks for your reply.

This issue only occurs on some devices, while others display the transparency as expected. I have checked and confirmed that no black background is set anywhere. I also tried hiding all other layers, but the canvas background remains black.