如何在2d画布和WebGL画布之间共享纹理？

// 获取2D画布
var canvas2D = document.getElementById('canvas2D');
var context2D = canvas2D.getContext('2d');

// 绘制图像或图形
context2D.drawImage(image, 0, 0);

// 获取像素数据
var imageData = context2D.getImageData(0, 0, canvas2D.width, canvas2D.height);

// 获取WebGL画布
var canvasWebGL = document.getElementById('canvasWebGL');
var gl = canvasWebGL.getContext('webgl');

// 创建纹理对象
var texture = gl.createTexture();

// 绑定纹理
gl.bindTexture(gl.TEXTURE_2D, texture);

// 设置纹理参数
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

// 将2D画布的像素数据绑定到纹理上
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imageData);

// 在WebGL画布上绘制使用共享纹理的图像或图形
gl.drawArrays(gl.TRIANGLES, 0, 6);