JSFiddle - React, Tailwind, and code Playground

by KendoDev

HTML

<canvas id="glcanvas" width="640" height="480">
    Your browser doesn't appear to support the HTML5 element.
  </canvas>

JavaScript

// WebGL demo
// https://developer.mozilla.org/en-US/docs/Web/WebGL

var gl; // A global variable for the WebGL context

function start() {
  var canvas = document.getElementById("glcanvas");
    try {
  gl = initWebGL(canvas);      // Initialize the GL context
  
  // Only continue if WebGL is available and working
  
  if (gl) {
    gl.clearColor(0.0, 0.5, 1.0, 1.0);                      // Set clear color to black, fully opaque
    gl.enable(gl.DEPTH_TEST);                               // Enable depth testing
    gl.depthFunc(gl.LEQUAL);                                // Near things obscure far things
    gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);      // Clear the color as well as the depth buffer.
  }
    } catch (err) { alert(err); }
        
    
}

function initWebGL(canvas) {
  gl = null;
  
  try {
    // Try to grab the standard context. If it fails, fallback to experimental.
    gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
  }
  catch(e) {}
  
  // If we don't have a GL context, give up now
  if (!gl) {
    alert("Unable to initialize WebGL. Your browser may not support it.");
    gl = null;
  }
  
  return gl;
}


start();