title: WebGL - drawElements: The texture is a non-power-of-two texture or not mipmap complete
body: <p>I am drawing a <code>&lt;video&gt;</code> onto a webgl canvas. I have it working in chrome and firefox, but IE11 seems to be throwing an error. The error states:</p>
  
  <pre><code>drawElements: The texture is a non-power-of-two texture or not mipmap complete 
  </code></pre>
  
  <p>and refers to this specific line:</p>
  
  <pre><code>gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
  </code></pre>
  
  <p>I have a <code>requestAnimationFrame</code> loop running that is updating my canvas. I've read this error can be caused by the image not being ready or loaded. Here is my loop:</p>
  
  <pre><code>(function loop()
  {
    if (!$this.paused &amp;&amp; !$this.ended)
    {
  
      gl.clear(gl.COLOR_BUFFER_BIT);
  
      gl.activeTexture(gl.TEXTURE0);
      gl.bindTexture(gl.TEXTURE_2D, tex);
  
      if (!$this.paused &amp;&amp; !$this.ended)
      {
        try
        {
          // update the video frame
          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, player);
        }
        catch(e)
        {
          log(e);
        }
      }
  
      gl.bindBuffer(gl.ARRAY_BUFFER, vx);
      gl.vertexAttribPointer(vx_ptr, 2, gl.FLOAT, false, 0, 0);
  
      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ix);
      gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
      window.requestAnimationFrame(loop);
    }
  })();
  </code></pre>
  
  <p>What seems to be causing this? I have been searching with no luck. Before my loop runs, I setup the webgl canvas with this code:</p>
  
  <pre><code> $scope.prepWebGL = function()
   {
        // prepare visible WebGL
        vs = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vs, "attribute vec2 vx;varying vec2 tx;void main(){gl_Position=vec4(vx.x*2.0-1.0,1.0-vx.y*2.0,0,1);tx=vx;}");
        gl.compileShader(vs);
  
        ps = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(ps, "precision mediump float;uniform sampler2D sm;varying vec2 tx;void main(){gl_FragColor=texture2D(sm,tx);}");
        gl.compileShader(ps);
  
        shader  = gl.createProgram();
        gl.attachShader(shader, vs);
        gl.attachShader(shader, ps);
        gl.linkProgram(shader);
        gl.useProgram(shader);
  
        vx_ptr = gl.getAttribLocation(shader, "vx");
        gl.enableVertexAttribArray(vx_ptr);
        gl.uniform1i(gl.getUniformLocation(shader, "sm"), 0);
  
        vx = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vx);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0,0, 1,0, 1,1, 0,1]), gl.STATIC_DRAW);
  
        ix = gl.createBuffer();
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ix);
        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array([0,1,2, 0,2,3]), gl.STATIC_DRAW);
  
        tex = gl.createTexture();
        gl.bindTexture(gl.TEXTURE_2D, tex);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T,     gl.CLAMP_TO_EDGE);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S,     gl.CLAMP_TO_EDGE);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
   };
  </code></pre>