Render texture to other webgl canvas element


Does anyone know what the fastest/most efficient way is of getting a displayed texture from webgl canvas A and copy/display it onto webgl canvas B? (Canvas B needs to be dynamically updated with the changes made in canvas A)

I’m trying to do this with a framebuffer object and rendering it to a texture, but I get an error in canvas B : WebGL bind texture: Object from different webgl context (or older generation of this one) passed as argument.

any idea’s are welcome


The way I’m fixing it now is by using the .toDataURL() method. It works, but it’s really slow. Anyone another idea?

I am not sure why you are trying copy Canvas A to Canvas B. Why not just render your image to both Canvases? i.e. Rerender instead of copy?

In canvas B you can use canvas A as texture input and display that texture. texImage2D accepts HTMLCanvasElement as parameter :

var canvasA = document.getElementById('canvasA');
gl.texImage2D(gl.TEXTURE_2D, ..., canvasA);

If you want automatically update the output in canvas B you can use texSubImage2D. See the specs. :slight_smile:

1 Like