Way to get whether viewport on one page is clipped?

I currently have a webpage that I am working on a network game for. I have 4 different canvases (can be more) on the screen and each one has a different friends character screen on it. I won’t bore you with the details, but I am trying to get some more performance out of it and I was wondering if there is a way for me to tell, using WebGL, which DOM iframes, with their child canvases, are on the screen so I only render/update the canvases that are viewable.

I don’t want to waste resources rendering something that is offscreen, with relation to the DOM. I know that within the canvas that the hardware will only render the front-most parent, but I want to know if I can find out which canvas element on the DOM is in “view” / “not in view” . Not finding much online now and thinkin that this may come down to just writing some more POC’s, but figured it was worth a try to see if any of you had any ideas or had come across some sites with more of this type of info.