# Overlaying webcam input (transparent way )on top of WebGL canvas?

**URL:** <https://discourse.processing.org/t/overlaying-webcam-input-transparent-way-on-top-of-webgl-canvas/36833>\
**Category:** Coding Questions\
**Created:** [May 11, 2022, 7:54pm UTC](https://discourse.processing.org/t/overlaying-webcam-input-transparent-way-on-top-of-webgl-canvas/36833 "2022-05-11T19:54:47Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Timo](https://avatars.discourse-cdn.com/v4/letter/t/c4cdca/32.png) [@Timo](https://discourse.processing.org/u/Timo)\
**Post date:** [May 11, 2022, 7:54pm UTC](https://discourse.processing.org/t/overlaying-webcam-input-transparent-way-on-top-of-webgl-canvas/36833/1 "2022-05-11T19:54:47Z")

</div>

Hi, I have been trying to overlay webcam feed on top of a webGL canvas having cube shapes . In the sketch

- The cube originates from `-z` value and moves towards the user
- When i dont have the video/ webcam element overlaid , i can clearly see the cube originating from `-z` co-ordinate
- When i overlay the video / webcam element, I can only see the cube in the last moment : It seems to be hidden behind the video / webcam feed.

I tried to use createGraphics but as I am using the webcam feed to do some calculations , I do not want to use it .  
Is there any way to achieve that ?  
p5js sketch : [p5.js Web Editor](https://editor.p5js.org/timtensor/sketches/RuDBIyVcv)

Timo