Using an image as a WebGL Texture

webgl_img_texture.js

// using webgl-utils.js for *everything*
// and assuming you have a global called gl
// that's pointed to the webgl canvas context
// based on learningwebgl.com <3

function initTextureWith(imgUrl) {
  var imgElement = new Image();

  imgElement.onload = function () {
      var texture = makeTextureFrom(this);
      textureLoaded(texture);
  }

  // img doesn't start loading until its src is set:
  imgElement.src = imgUrl;
};

function makeTextureFrom(imgElement) {
   var texture = this.gl.createTexture();

   gl.bindTexture(this.gl.TEXTURE_2D, texture);
   gl.pixelStorei(this.gl.UNPACK_FLIP_Y_WEBGL, true);
   gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.gl.RGBA, gl.UNSIGNED_BYTE, imgElement);
   gl.texParameteri(this.gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
   gl.texParameteri(this.gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);

   // tidy up
   this.gl.bindTexture(this.gl.TEXTURE_2D, null);

   return texture;

}

function textureLoaded(texture){
   console.log('yay my texture ' + texture + ' has loaded';
}