JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="holochrist" width="640" height="480">  
            You need a newer browser.
        </canvas>

JavaScript

var gl;

function start() {
    alert("Balls!");
    
    var canvas = document.getElementById("holochrist");  

    initWebGL(canvas);      // Initialize the GL context  
    
    // Only continue if WebGL is available and working  
    
    if (gl) {
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.enable(gl.DEPTH_TEST);
        gl.depthFunc(gl.LEQUAL);
        gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
        
        /*******************************************************|
        |    1. Set clear color to black, fully opaque          |
        |    2. Enable depth testing                            |
        |    3. Near things obscure far things                  |
        |    4. Clear the color as well as the depth buffer.    |
        ********************************************************/
    }    
}

function initWebGL(canvas) {
    gl = null;  //Initialize the global var gl to null.
    
    try {
        //Try to grab the standard context. If it fails, use experimental.
        
        gl = canvas.getContext("webgl") || canvas.getContext("experimantal-webgl");
        
        alert(gl);
        
        gl.viewport(0, 0, canvas.width, canvas.height);
    }
    catch(e) {}
    
    if (!gl) {  //If we can't get GL context, give up.
        alert("Unable to initalize WebGL. Your browser propably doesn't support it");   
    }
}
              
start();