JSFiddle - React, Tailwind, and code Playground

by Julien Etienne

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL Triangle on Multiple Canvases</title>
</head>
<body>

    <canvas id="canvas1" width="300" height="200"></canvas>
    <canvas id="canvas2" width="300" height="200"></canvas>

    <script>
        function initWebGL(canvas) {
            const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
            if (!gl) {
                alert('Unable to initialize WebGL. Your browser may not support it.');
                return null;
            }
            return gl;
        }

        function createShader(gl, type, source) {
            const shader = gl.createShader(type);
            gl.shaderSource(shader, source);
            gl.compileShader(shader);

            if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
                console.error('Shader compilation error:', gl.getShaderInfoLog(shader));
                gl.deleteShader(shader);
                return null;
            }

            return shader;
        }

        function createProgram(gl, vertexShader, fragmentShader) {
            const program = gl.createProgram();
            gl.attachShader(program, vertexShader);
            gl.attachShader(program, fragmentShader);
            gl.linkProgram(program);

            if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
                console.error('Program linking error:', gl.getProgramInfoLog(program));
                gl.deleteProgram(program);
                return null;
            }

            return program;
        }

        function initBuffers(gl) {
            const vertices = new Float32Array([
                0.0,  1.0,
               -1.0, -1.0,
                1.0, -1.0,
            ]);

            const vertexBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
           ...