WebGL image not rendering but not giving any error

Question

I am new to WebGL. I decided to make a 2D game with it and Typescript. I got colored rectangles to draw, but I am not able to get images to render.

I basically copied some code from another question (Drawing an image using WebGL) and converted it to Typescript but it still doesn't work.

This is my vertex shader:

attribute vec2 a_position;

    uniform mat3 u_matrix;

    varying vec2 v_texCoord;

    void main() {
        gl_Position = vec4(u_matrix * vec3(a_position, 1), 1);

        // because we're using a unit quad we can just use
        // the same data for our texcoords.
        v_texCoord = a_position;  
    }

My fragment shader:

precision mediump float;

    // our texture
    uniform sampler2D u_image;

    // the texCoords passed in from the vertex shader.
    varying vec2 v_texCoord;

    void main() {
    gl_FragColor = texture2D(u_image, v_texCoord);
    }

I initialize the image drawing class like this:

public constructor(gl: WebGLRenderingContext, vertexShaderId: string, fragmentShaderId: string){
    this.gl = gl;

    this.glUtil = new WebglUtil();

    this.vs = this.glUtil.createShader(this.gl,this.gl.VERTEX_SHADER,vertexShaderId);
    this.fs = this.glUtil.createShader(this.gl,this.gl.FRAGMENT_SHADER,fragmentShaderId);

    this.program = this.glUtil.createProgram(this.gl,this.vs,this.fs);

    //get locations
    this.a_posLoc = this.gl.getAttribLocation(this.program,"a_pos");
    
    this.u_imageLoc = this.gl.getUniformLocation(this.program, "u_image");
    this.u_matrixLoc = this.gl.getUniformLocation(this.program, "u_matrix");

    this.positionBuffer = this.gl.createBuffer();
    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.positionBuffer);
    this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(
        [0.0,  0.0,
        1.0,  0.0,
        0.0,  1.0,
        0.0,  1.0,
        1.0,  0.0,
        1.0,  1.0]
    ), this.gl.STATIC_DRAW);
    this.gl.enableVertexAttribArray(this.a_posLoc);
    this.gl.vertexAttribPointer(this.a_posLoc, 2, this.gl.FLOAT, false, 0, 0);

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

    
    
}

This is the function to draw the image:

public drawImage(tex: HTMLImageElement, x: number, y: number): void{
    var width = tex.width;
    var height = tex.height;
    // Upload the image into the texture.
    this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.gl.RGBA, this.gl.UNSIGNED_BYTE, tex);

    this.glUtil.resizeCanvasToDisplaySize(this.gl);

    this.gl.useProgram(this.program);

    var clipX = x / this.gl.canvas.width  *  2 - 1;
    var clipY = y / this.gl.canvas.height * -2 + 1;
    var clipWidth = width  / this.gl.canvas.width  *  2;
    var clipHeight = height / this.gl.canvas.height * -2;

    this.gl.uniformMatrix3fv(this.u_matrixLoc, false, [
        clipWidth, 0, 0,
        0, clipHeight, 0,
        clipX, clipY, 1,
      ]);

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

}

and I call it like this:

this.temptex = document.getElementById('imagee') as HTMLImageElement;
this.imageRender.drawImage(this.temptex,0,0);

After all this, it doesn't display anything.