# Getting webGLContextLostProtect error

**URL:** <https://devforum.zoom.us/t/getting-webglcontextlostprotect-error/74263>\
**Category:** Web\
**Created:** [August 15, 2022, 11:06pm UTC](https://devforum.zoom.us/t/getting-webglcontextlostprotect-error/74263 "2022-08-15T23:06:33Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![irfan.ali1922](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/irfan.ali1922/32/37907_2.png) [@irfan.ali1922](https://devforum.zoom.us/u/irfan.ali1922)\
**Post date:** [August 15, 2022, 11:06pm UTC](https://devforum.zoom.us/t/getting-webglcontextlostprotect-error/74263/1 "2022-08-15T23:06:33Z")

</div>

Hey, I understand that Zoom advises rendering multiple videos on a single canvas. However, we frequently need to display additional information along with video, such as the username, mute/unmute button, etc.  
Calling the  
“canvas.getContext(“2d”)”  
function on canvas is required to do that. nonetheless, the moment I call this method, I receive the following error:

```auto
cdc37ca3-005f-43ed-a64d-499975686a4e:1 Uncaught TypeError: Cannot read properties of undefined (reading 'addEventListener')
    at p.webGLContextLostProtect (cdc37ca3-005f-43ed-a64d-499975686a4e:1:181061)
    at p.Get_Display (cdc37ca3-005f-43ed-a64d-499975686a4e:1:182334)
    at cdc37ca3-005f-43ed-a64d-499975686a4e:1:167535

```

code snippet -

```auto
 console.log('===rendering video',x,y, cellWidth, cellHeight,canvas)
    if(user.bVideoOn){
      mediaStream.renderVideo(canvas, user.userId, cellWidth, cellHeight, x, y, 2)
    }else{
      mediaStream.stopRenderVideo(canvas, user.userId)
    }
    if(x=== 0)
    {
      x = cellWidth;
    }
    if(y ===0){
      y = cellHeight;
    }
    var ctx = canvas.getContext("2d");
    const nameText = ctx.measureText(user.displayName);
    ctx.fillStyle = "#ffffff"
    ctx.fillText(user.displayName, (x/2) - (nameText.width / 2), (y - y/4));

```

---

<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:** [August 16, 2022, 2:33am UTC](https://devforum.zoom.us/t/getting-webglcontextlostprotect-error/74263/2 "2022-08-16T02:33:17Z")

</div>

Hey @irfan.ali1922

Thanks for your feedback.

The canvas which is used to render the video will be transferred to [OffscreenCanvas](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas), for that reason, the canvas cannot be used as “2d context”.

We recommend using the DOM elements(DivElement) that overlap the canvas to present more information, such as display name, and audio status.

Thanks  
Vic

---

<div class="post-metadata">

**Author:** ![parker](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/parker/32/40768_2.png) [@parker](https://devforum.zoom.us/u/parker)\
**Post date:** [August 25, 2022, 5:35am UTC](https://devforum.zoom.us/t/getting-webglcontextlostprotect-error/74263/3 "2022-08-25T05:35:27Z")

</div>

@vic.yang

Do you have any pseudo code that showcases this concept?

> [@vic.yang](#):
>
> We recommend using the DOM elements(DivElement) that overlap the canvas to present more information, such as display name, and audio status.

PS - I was trying to look at the `<ul> + <avatar>` component in the sample app, but was having a hard time understanding it.

---

<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:** [September 24, 2022, 3:36pm UTC](https://devforum.zoom.us/t/getting-webglcontextlostprotect-error/74263/4 "2022-09-24T15:36:16Z")

</div>

Closed on September 24, 2022, 3:36pm UTC

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