<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width">
<style>
body {
    margin: 0;
    background-size: 100px 100px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><rect width="0.5" height="0.5" fill="blue"/><rect x="0.5" y="0.5" width="0.5" height="0.5" fill="orange"/><rect x="0" y="0.5" width="0.5" height="0.5" fill="yellow"/><rect x="0.5" y="0" width="0.5" height="0.5" fill="pink"/></svg>');
}
canvas {
    width: 200px;
    height: 200px;
}
</style>
</head>
<script id="vertexShaderSource" type="text/glsl">
attribute vec4 position;
void main() {
  gl_Position = position;
}
</script>
<script id="fragmentShaderSource1" type="text/glsl">
#ifdef GL_ES
precision mediump float;
#endif

void main() {
  gl_FragColor = vec4(1.0, 0.0, 0.0, 0.5);
}
</script>
<script id="fragmentShaderSource2" type="text/glsl">
#ifdef GL_ES
precision mediump float;
#endif

void main() {
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
</script>
<script>

function drawTriangle(canvas, alpha) {
    canvas.width = 200;
    canvas.height = 200;
    var gl = canvas.getContext("webgl", { alpha: true });
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader, document.getElementById("vertexShaderSource").textContent);
    gl.compileShader(vertexShader);
    if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
        console.error("Vertex Shader failed to compile.");
        console.log(gl.getShaderInfoLog(vertexShader));
        return;
    }
    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    var fragmentShaderSourceID = "fragmentShaderSource" + (alpha ? "1" : "2");
    gl.shaderSource(fragmentShader, document.getElementById(fragmentShaderSourceID).textContent);
    gl.compileShader(fragmentShader);
    if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
        console.error("Fragment Shader failed to compile.");
        console.log(gl.getShaderInfoLog(fragmentShader));
        return;
    }
    var program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);

    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
        console.error("Unable to link shaders into program.");
        return;
    }
    gl.useProgram(program);
    var positionAttribute = gl.getAttribLocation(program, "position");
    gl.enableVertexAttribArray(positionAttribute);
    var vertices = new Float32Array([
       -0.5, -0.5,
       0.5, -0.5,
       0, 0.5
    ]);
    var triangleBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, triangleBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
    gl.clearColor(0, 1, 0, alpha ? 0.5 : 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.bindBuffer(gl.ARRAY_BUFFER, triangleBuffer);
    gl.vertexAttribPointer(positionAttribute, 2, gl.FLOAT, false, 0, 0);
    gl.drawArrays(gl.TRIANGLES, 0, 3);
}

window.addEventListener("load", function () {
    var canvases = document.querySelectorAll("canvas");
    drawTriangle(canvases[0], true);
    drawTriangle(canvases[1], false);
}, false);
</script>
<body>
    <canvas></canvas><canvas></canvas>
</body>