title: HTML 2d canvas as texture on webgl canvas
body: <p>I'm trying to add a canvas with context <code>2d</code> as a <code>texture</code> to a <code>webgl</code> canvas based on this example <a href="https://delphic.me.uk/tutorials/webgl-text" rel="nofollow noreferrer">here</a>. The texture appears to be blank on the <code>webgl</code> canvas but the image is loaded when I append the texture canvas to the<code>DOM</code> on it's own. What may I be missing here?</p>
  <pre><code>const canvas = document.createElement(&quot;canvas&quot;);
      const textureCanvas = document.createElement('canvas');
      textureCanvas.width = 200
      textureCanvas.height = 200
      const ctx = textureCanvas.getContext('2d')
      const img = new Image();
      img.src = &quot;https://i.imgur.com/uIEexIc.jpg&quot;;
      img.crossOrigin = 'Anonymous'
  
      img.onload = (i) =&gt; {
        
        ctx.drawImage(img, 0,0, 200, 200)
      }
  
     
      const gl = canvas.getContext(&quot;webgl&quot;);
      const canvasTexture = gl.createTexture();
      
      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
  
      gl.bindTexture(gl.TEXTURE_2D, canvasTexture);
      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureCanvas); 
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
      gl.generateMipmap(gl.TEXTURE_2D);
  
      gl.bindTexture(gl.TEXTURE_2D, null);
  </code></pre>