Does canvas context2d.drawImage( webglCanvas, 0, 0 ) block until a webgl is finished rendering?

I assume the answer is “no” from my testing but I thought I’d make sure.

I’m trying to draw / copy the contents from a WebGL canvas to a 2d canvas every frame and I want to know if I should wait until the WebGL context is finished drawing (which I can use gl.fenceSync to check) before calling it or if I can call drawImage immediately without worrying about a performance hit. Here’s how I would plan to use it using three.js as a stand in renderer:

const renderer = new THREE.WebGLRendeer();
const canvas = document.createElement( 'canvas' );
const ctx = canvas.getContext( '2d' );

// ...

function renderLoop() {

    renderer.render( camera, scene1 );
    ctx.drawImage( renderer.domElement, 0, 0 );

    renderer.render( camera, scene2 );
    ctx.drawImage( renderer.domElement, 0, 0 );

}

Is there a pitfall here I’m missing? Here’s a jsfiddle showing the basic concept.


I created a post at Stackoverflow but figured I’d post here in case someone knew the answer. It’s not clear to me from the docs online. Here’s the SO link.