Replacement of Canvas API with WebGL in the Snake Game

<!DOCTYPE html>
 
<head>
    <title>Snake</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"></script>
</head>
 
<body>
    <canvas width="200" height="200" id="gameCanvas">
        Your browser does not support HTML5 Canvas. Please shift to a newer browser.
    </canvas>
 
    <script>
        // Canvas element and gl context
        var canvas, gl;
 
        canvas = document.getElementById("gameCanvas");
        gl = canvas.getContext("webgl");
 
        // Run Game Loop
        setInterval(gameLoop, 200)
        function gameLoop()
        {
            update();
            draw();
        }
 
        function update()
        {
        }
 
        function draw()
        {
            clearCanvas(0.0, 0.0, 0.0)
        }
 
        function clearCanvas(r, g, b)
        {
            gl.clearColor(r, b, g, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);
        }
    </script>
</body>
 
</html>

<!DOCTYPE html>
 
<head>
    <title>Snake</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"></script>
</head>
 
<body>
    <canvas width="200" height="200" id="gameCanvas">
        Your browser does not support HTML5 Canvas. Please shift to a newer browser.
    </canvas>
 
    <p>Click on this window to activate keyboard handlers to control the snake by WASD and arrow keys.</p>
 
    <script>
        // Canvas element and gl context
        var canvas, gl;
        // Snake list of (x, y) positions
        var snake = [{ x: 10, y: 10 }];
        // Snake movement direction
        var snakeDir = { x: 10, y: 0 };
        // Snake step
        var cellSize = 10;
 
        // Food
        var food = { x: 0, y: 0 };
 
        var vertexShaderSource =
            "attribute vec2 aPosition;" +
            "uniform mat4 uProjMatrix;" +
            "uniform mat4 uScaleMatrix;" +
            "uniform mat4 uTranslateMatrix;" +
            "void main()" +
            "{" +
            "    gl_Position = uProjMatrix * uTranslateMatrix * uScaleMatrix * vec4(aPosition, 1.0, 1.0);" +
            "}";
 
        var fragmentShaderSource =
            "precision mediump float;" +
            "uniform vec3 uColor;" +
            "void main()" +
            "{" +
            "    gl_FragColor = vec4(uColor, 1.0);" +
            "}";
 
        canvas = document.getElementById("gameCanvas");
        gl = canvas.getContext("webgl");
 
        // Compile shaders, link a shader program and get the shader program
        var shaderProgram = initShaders();
        if (shaderProgram < 0)
        {
            console.log("Failed to get a shader program");
        }
 
        initVertexBuffers();
 
        // Get location of a aPosition variable in the vertex shader
        var aPosition = gl.getAttribLocation(shaderProgram, "aPosition");
        if (aPosition < 0)
        {
            console.log("Failed to get aPosition variable");
        }
 
        gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, gl.FALSE, 0, 0);
        gl.enableVertexAttribArray(aPosition);
 
        // Field size
        var fieldWidth = canvas.width;
        var fieldHeight = canvas.height;
        gl.viewport(0, 0, fieldWidth, fieldHeight);
 
        // Get locations of matrixes and set values for them
        // Projection matrix
        var projMatrix = mat4.create();
        mat4.ortho(projMatrix, 0.0, fieldWidth, fieldHeight, 0.0, -100.0, 100.0);
        passMatrixToShader("uProjMatrix", projMatrix);
        // Scale matrix
        var scaleMatrix = mat4.create();
        // Translate matrix
        var translateMatrix = mat4.create();
 
        function passMatrixToShader(matrixName, matrix)
        {
            var uLocation = gl.getUniformLocation(shaderProgram, matrixName);
            if (uLocation == null)
            {
                console.log("Failed to get a location variable: " + matrixName);
            }
            gl.uniformMatrix4fv(uLocation, false, matrix);
        }
 
        // Generate an initial random position for the food
        generateFood();
 
        // Set a key handler
        document.onkeydown = (event) =>
        {
            switch (event.keyCode)
            {
                case 38:    // Up
                case 87:    // W
                    snakeDir.x = 0;
                    snakeDir.y = -cellSize;
                    break;
                case 37:    // Left
                case 65:    // A
                    snakeDir.x = -cellSize;
                    snakeDir.y = 0;
                    break;
                case 39:    // Right
                case 68:    // D
                    snakeDir.x = cellSize;
                    snakeDir.y = 0;
                    break;
                case 40:    // Down
                case 83:    // S
                    snakeDir.x = 0;
                    snakeDir.y = cellSize;
                    break;
            }
        };
 
        // Run Game Loop
        setInterval(gameLoop, 200)
        function gameLoop()
        {
            update();
            draw();
        }
 
        function update()
        {
            // Calc a new position of the head
            var newHeadPosition = {
                x: snake[0].x + snakeDir.x,
                y: snake[0].y + snakeDir.y
            }
 
            // Insert new position in the beginning of the snake list
            snake.unshift(newHeadPosition);
 
            // Remove the last element
            snake.pop();
 
            // Check a collision with the snake and the food
            if (snake[0].x === food.x &&
                snake[0].y === food.y)
            {
                snake.push({ x: food.x, y: food.y });
 
                // Generate a new food position
                generateFood();
            }
        }
 
        function draw()
        {
            clearCanvas(0.0, 0.0, 0.0);
 
            drawSnake();
            drawFood();
        }
 
        function clearCanvas(r, g, b)
        {
            gl.clearColor(r, b, g, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);
        }
 
        function drawSnake()
        {
            snake.forEach(cell =>
            {
                drawRectangle(cell.x, cell.y, [0.0, 1.0, 0.0], cellSize);
            });
        }
 
        function drawFood()
        {
            drawRectangle(food.x, food.y, [1.0, 0.5, 0.0], cellSize);
        }
 
        function drawRectangle(x, y, color, size)
        {
            // Set scale
            mat4.identity(scaleMatrix);
            mat4.scale(scaleMatrix, scaleMatrix, vec3.fromValues(size, size, 1.0));
            passMatrixToShader("uScaleMatrix", scaleMatrix);
 
            // Set translation
            mat4.identity(translateMatrix);
            mat4.translate(translateMatrix, translateMatrix, vec3.fromValues(x, y, 0.0));
            passMatrixToShader("uTranslateMatrix", translateMatrix);
 
            // Set color
            var uColor = gl.getUniformLocation(shaderProgram, "uColor");
            if (uColor === null)
            {
                console.log("Failed to get uColor variable");
                return;
            }
            gl.uniform3fv(uColor, color);
 
            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
        }
 
        function generateFood()
        {
            food.x = 10 * getRandomInt(0, fieldWidth / 10 - 1);
            food.y = 10 * getRandomInt(0, fieldHeight / 10 - 1);
        }
 
        // Returns a random integer between min (inclusive) and max (inclusive)
        function getRandomInt(min, max)
        {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
 
        function initShaders()
        {
            // Vertex shader
            var vShader = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vShader, vertexShaderSource);
            gl.compileShader(vShader);
            var vShaderInfo = gl.getShaderInfoLog(vShader);
            if (vShaderInfo !== "")
            {
                console.log(vShaderInfo);
                return -1;
            }
 
            // Fragment shader
            var fShader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fShader, fragmentShaderSource);
            gl.compileShader(fShader);
            var fShaderInfo = gl.getShaderInfoLog(fShader);
            if (fShaderInfo !== "")
            {
                console.log(fShaderInfo);
                return -1;
            }
 
            // Create shader program
            var program = gl.createProgram();
            gl.attachShader(program, vShader);
            gl.attachShader(program, fShader);
            gl.linkProgram(program);
            gl.useProgram(program);
 
            return program;
        }
 
        function initVertexBuffers()
        {
            var vertices = new Float32Array([
                0.0, 0.0,
                0.0, 1.0,
                1.0, 0.0,
                1.0, 1.0
            ]);
 
            var vbo = gl.createBuffer();
 
            gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
            gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
        }
    </script>
</body>
 
</html>