WebGL image rendering bad quality

I have a problem with image rendering in WebGL: I have a canva, with a quad that takes the whole canvas, and a texture which is supposed to be mapped onto the whole quad (I have set the correct texture coordinates).

The image is a Uint8array containing RGB data (in this order) and the image is 1024*768 pixels. I have the correct buffer. Here is the link to the image.

The problem is the following: when rendered into WebGL, my picture becomes blurry and fuzzy, even if I have a canva that is the size of the image. See the result below:

Now for the code: Here is the code I use to create the texture handle:

//texture
that.Texture = that.gl.createTexture();         
that.gl.bindTexture(that.gl.TEXTURE_2D, that.Texture);                          

// Set the parameters so we can render any size image.
that.gl.texParameteri(that.gl.TEXTURE_2D, that.gl.TEXTURE_WRAP_S, that.gl.CLAMP_TO_EDGE);
that.gl.texParameteri(that.gl.TEXTURE_2D, that.gl.TEXTURE_WRAP_T, that.gl.CLAMP_TO_EDGE);
that.gl.texParameteri(that.gl.TEXTURE_2D, that.gl.TEXTURE_MIN_FILTER, that.gl.NEAREST);
that.gl.texParameteri(that.gl.TEXTURE_2D, that.gl.TEXTURE_MAG_FILTER, that.gl.NEAREST);

The data is loaded onto the texture as follows:

this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGB, this.m_iImageWidth, this.m_iImageHeight,
0, this.gl.RGB, this.gl.UNSIGNED_BYTE, this.m_aImage);

And finally, here is the fragment shader I use:

precision mediump float;
uniform sampler2D u_image;
varying vec2 v_texCoord;
void main() 
{
   gl_FragColor = texture2D(u_image, v_texCoord);
}

I have tried a lot of options, from filtering to setting style option image-rendering pixelated, converting the image in RGBA and giving it RGBA values and the results is always the same crappy texture rendering. It looks like WebGL does not correctly interpolates the data even though the canvas is the exact same size as the texture.

Does any one have a hint?

Thanks in advance.

Make sure that the canvas width and height match the pixel display size. The display size is set via the style width and height.

Resolution is the number of pixels in the image. Display size is the amount of space that it occupies on the page. The two should match for the best results.

canvas = document.createElement("canvas");
canvas.width = 1024; // set the canvas resolution
canvas.height = 784;

canvas.style.width = "1024px"; // set the display size.
canvas.style.height = "784px";

The display size if larger than the resolution will stretch the canvas out and cause the bluring