Why does the webGL rendered image not change when the vertex position is changed?

The
code is shown in the following figure. Change vertexs
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <canvas id="glcanvas" width="640" height="480"></canvas>
</body>
<script type="text/javascript">
    var glCanvas = document.getElementById("glcanvas");
    var gl = glCanvas.getContext("webgl");

    var vertexs = [
        0.0, 0.5, 0.0,
        0.0, -0.5, 0.0,
        0.5, -0.5, 0.0,
    ];
    var colors = [
        0.0, 0.0, 1.0, 1.0,
        1.0, 0.0, 0.0, 1.0,
        0.0, 1.0, 0.0, 1.0
    ];

    var buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexs), gl.STATIC_DRAW);

    var colorBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);

    //
    var vsSource = `
        attribute vec3 vPosition;
        attribute vec4 vColor;
        varying lowp vec4 uColor;
        void main() {
              gl_Position = vec4(vPosition.x, vPosition.y, vPosition.z, 1.0);
              uColor = vColor;
        }
    `;
    var fgSource = `
        varying lowp vec4 uColor;
        void main() {
            gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
        }
    `;

    //
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader, vsSource);
    gl.compileShader(vertexShader);
    if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
        alert("An error occurred compiling the shaders: " + gl.getShaderInfoLog(vertexShader));
        gl.deleteShader(vertexShader);
     }
    //
    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragmentShader, fgSource);
    gl.compileShader(fragmentShader);
    if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
        alert("An error occurred compiling the shaders: " + gl.getShaderInfoLog(fragmentShader));
        gl.deleteShader(fragmentShader);
    }

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


    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
        alert("Unable to initialize the shader program: " + gl.getProgramInfoLog(shaderProgram));
      }
    

    //
    var pl = gl.getAttribLocation(shaderProgram, "vPosition");
    gl.vertexAttribPointer(pl, 3, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(pl);
    // //
    var cl = gl.getAttribLocation(shaderProgram, "vColor");
    gl.vertexAttribPointer(cl, 4, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(cl);

    gl.useProgram(shaderProgram);
    // gl.uniform1f(gl.getUniformLocation(shaderProgram, "offset"), 0.5)
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3);
    // gl.drawArrays(gl.LINE_LOOP, 0, 3);
</script>
</html>
is it because you have a wrong understanding of webGL-related knowledge? ask the boss for advice