JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick="uploadImage();resetTex();">upload image</button><br/>
<button onclick="uploadCanvas();resetTex();">upload canvas</button><br/>
<button onclick="uploadImageData();resetTex();">upload imagedata</button><br/>
<div id="info"></div>
<table id="tab" border="1"></table>

JavaScript

var canvas2d = document.createElement('canvas');
var ctx2d = canvas2d.getContext("2d");

var img = new Image();
img.onload = function(){
    canvas2d.width = this.width;
    canvas2d.height = this.height;
    alert("img loaded: " + img.width + "x" + img.height);
}
img.crossOrigin="";
img.src="http://upload.wikimedia.org/wikipedia/commons/b/b0/Lotus_Nelumbo_nucifera_Flower_Close_2048px.jpg";

var canvas3d = document.createElement('canvas');
var gl = canvas3d.getContext('experimental-webgl');
var tex=null;

var info = document.getElementById("info");

resetTex = function() {
    if(tex) gl.deleteTexture(tex);
    tex = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, tex);
};

uploadImage = function(){
    var draw=0, retrieve=0, upload=0;
    
    startUpload = performance.now();
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
    upload = performance.now()-startUpload;
    
    var sum = draw+retrieve+upload;
    info.innerHTML += ("Image: " + draw + "\t" + retrieve + "\t" + upload + "\t = " + sum) + "</br>";
}

uploadImageData = function(){
    var draw=0, retrieve=0, upload=0;
    
    startDraw = performance.now();
    ctx2d.drawImage(img, 0, 0, img.width, img.height);
    draw = performance.now()-startDraw;
    
    startRetrieve = performance.now();
    var imgdata = ctx2d.getImageData(0, 0, canvas2d.width, canvas2d.height);
    retrieve = performance.now()-startRetrieve;
    
    startUpload = performance.now();
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imgdata);
    upload = performance.now()-startUpload;
    
    var sum = draw+retrieve+upload;
    info.innerHTML += ("ImageData: " + draw + "\t" + retrieve + "\t" + upload + "\t = " + sum) + "</br>";
}

uploadCanvas = function(){
    var draw=0, retrieve=0, upload=0;
    
    startDraw = performance.now();
    ctx2d.drawImage(img, 0, 0, img.width, img.height);
    draw = performance.now()-startDraw;;
    
    startUpload = performance.now();
 ...