HTML Save WebGL Canvas as Image

The reason the webgl canvas is blank has been answered at least 10 times here on stackoverflow

Saving canvas to image via canvas.toDataURL results in black rectangle

Canvas toDataURL() returns blank image only in Firefox

toDataURL() of webgl canvas returning transparent image

Why does my canvas go blank after converting to image?

I know there's several more but I'm too lazy to search for all of them

The only reason I didn't mark this as a duplicate is because you wanted 1 png from 2 canvases.

If you want just 1 png then you need to capture from one canvas. So, draw the WebGL canvas into the video canvas then call toDataURL on the video canvas.

const vctx = videocanvas.getContext('2d');
vctx.drawImage(webGLTestCanvas, 0, 0); 
const capturedImage = videocanvas.toDataURL();