{

    const init = () => {
        const $canvas = document.querySelector(`.canvas`),
            gl = $canvas.getContext(`webgl`);

        if(!gl) console.log(`WebGL niet ondersteunt`);

        $canvas.width = window.innerWidth;
        $canvas.height = window.innerHeight;

        gl.viewport(0, 0, $canvas.width, $canvas.height);
        gl.clearColor(0.75, 0.85, 0.8, 1);
        gl.clear(gl.COLOR_BUFFER_BIT || gl.DEPTH_BUFFER_BIT);

        const vertexShaderSource = `
            precision mediump float;
            attribute vec2 vertPosition;

            void main()
            {
                gl_Position = vec4(vertPosition, 0.0, 1.0);
            }
            `;

        const fragmentShaderSource = `
            precision mediump float;

            void main()
            {
                gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
            }
            `;

        const vertexShader = gl.createShader(gl.VERTEX_SHADER);
        const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(vertexShader, vertexShaderSource);
        gl.shaderSource(fragmentShader, fragmentShaderSource);

        gl.compileShader(vertexShader);
        if(!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)){
            console.error(`ERROR compiling vShader`, gl.getShaderInfoLog(vertexShader));
            return;
        }
        gl.compileShader(fragmentShader);
        if(!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)){
            console.error(`ERROR compiling fShader`, gl.getShaderInfoLog(fragmentShader));
            return;
        }

        //program aanmaken
        const program = gl.createProgram();
        gl.attachShader(program, vertexShader);
        gl.attachShader(program, fragmentShader);
        gl.linkProgram(program);
        if(!gl.getProgramParameter(program, gl.LINK_STATUS)){
            console.error(`ERROR LINKING PROGRAM`, gl.getProgramInfoLog(program));
            return;
        }

        gl.validateProgram(program);
        if(!gl.getProgramParameter(program, gl.VALIDATE_STATUS)){
            console.error(`ERROR VALIDATING PROGRAM`, gl.getProgramInfoLog(program));
            return;
        }

        // create buffer
        const triangleVertices = [
            //x, y
            0.0, 0.5,
            -0.5, -0.5,
            0.5, -0.5
        ];
        const triangleVertexBufferObj = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexBufferObj);
        gl.bufferData(gl.ARRAY_BUFFER,
            new Float32Array(triangleVertices),
            gl.STATIC_DRAW
        );

        //verticles aan shader meegeven
        const positionAttribLocation = gl.getAttribLocation(program, `vertPosition`)
        gl.vertexAttribPointer(
            positionAttribLocation,
            2,
            gl.FLOAT,
            gl.FALSE,
            2 * Float32Array.BYTES_PER_ELEMENT,
            0 * Float32Array.BYTES_PER_ELEMENT
        );
        gl.enableVertexAttribArray(positionAttribLocation);

        //tekenen op canvas
        gl.useProgram(program);
        gl.drawArrays(
            gl.TRIANGLES,
            0,
            3
        );

    };

    init();
}