simplest webgl

    // キャンバス要素を取得
    const canvas = document.getElementById("canvas");
    // WebGLコンテキストを取得
    const gl = canvas.getContext("webgl");

    // 頂点シェーダのソースコード
    const vertexShaderSource = `
      attribute vec4 a_position;
      void main() {
        gl_Position = a_position;
      }
    `;

    // フラグメントシェーダのソースコード
    const fragmentShaderSource = `
      precision mediump float;
      void main() {
        gl_FragColor = vec4(1, 0, 0, 1);
      }
    `;

    // シェーダを作成する関数
    function createShader(gl, type, source) {
      const shader = gl.createShader(type);
      gl.shaderSource(shader, source);
      gl.compileShader(shader);
      return shader;
    }

    // 頂点シェーダとフラグメントシェーダを作成
    const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
    const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);

    // プログラムオブジェクトを作成し、シェーダをアタッチ
    const program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    // プログラムオブジェクトをリンクし、使用する
    gl.linkProgram(program);
    gl.useProgram(program);

    // 頂点バッファを作成し、データを設定
    const positionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    const positions = [
      0, 0,
      1, 0,
      0, 1,
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

    // 頂点シェーダの属性変数a_positionの位置を取得し、有効化
    const a_position = gl.getAttribLocation(program, "a_position");
    gl.enableVertexAttribArray(a_position);
    // 属性変数にバッファデータを設定
    gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 0, 0);

    // キャンバスをクリア
    gl.clearColor(0, 0, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);

    // 三角形を描画
    gl.drawArrays(gl.TRIANGLES, 0, 3);