View Full Version : Render texture to other webgl canvas element

04-30-2011, 12:31 AM

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


05-03-2011, 12:33 PM
The way I'm fixing it now is by using the .toDataURL() method. It works, but it's really slow. Anyone another idea?

01-28-2012, 07:46 AM
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?

02-13-2012, 01:38 PM
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 (https://www.khronos.org/registry/webgl/specs/1.0/#5.13.8). :)