create WebGL texture out of RGBA values

The code you have there just creates a texture and loads it into GPU memory. So you're not actually drawing anything to the canvas.

To get that texture on screen you'll need a few more things:

Vertex shader

var vertexShaderSource = `
  in vec2 position;
  in vec2 texcoord;
  out vec2 uv;

  void main() {
    gl_Position = vec4(position, 0, 1);
    uv = texcoord;
  }
`;

var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

Fragment shader

var fragmentShaderSource = `
  in vec2 uv;
  uniform sampler2D image;
  out vec4 color;

  void main() {
    color = texture(image, uv);
  }
`;

var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

Shader program

var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);

Vertex data

var vertices = new Float32Array([
   1.0,  1.0, 0,  // a
  -1.0,  1.0, 0,  // b    b----a
   1.0, -1.0, 0,  // c    |    |
  -1.0,  1.0, 0,  // b    |    |
  -1.0, -1.0, 0,  // d    c----d
   1.0, -1.0, 0   // c
]);

var texcoords = new Float32Array([
  1.0, 0.0,
  0.0, 0.0,
  1.0, 1.0,
  0.0, 1.0
]);

Vertex array and array buffers

var vertexArray = gl.genVertexArray();
gl.bindVertexArray(vertexArray);

var vertexBuffer = gl.genBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

var texcoordBuffer = gl.genBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer);
gl.bufferData(gl.ARRAY_BUFFER, texcoords, gl.STATIC_DRAW);

Tell the shader program where to find the data within the buffers

var positionAttribute = gl.getAttribLocation(shaderProgram, "position");
gl.enableVertexAttribArray(positionAttribute);
gl.vertexAttribPointer(positionAttribute, 3, gl.FLOAT, false, 0, 0);

var texcoordAttribute = gl.getAttribLocation(shaderProgram, "texcoord");
gl.enableVertexAttribArray(texcoordAttribute);
gl.vertexAttribPointer(texcoordAttribute, 2, gl.FLOAT, false, 0, 0);

Send a draw call to the GPU

gl.drawArrays(gl.TRIANGLES, 0, 6);

I realize that is a TON of info to grok so I recommend reading through some guides. A good place to start might be MDN: Getting started with WebGL.