Test Num WebGL Contexts

by Gregg Tavares

HTML

<button type="button">add context</button>
<div>num contexts created: <span id="created">0</span></div>
<div>num contexts lost: <span id="lost">0</span></div>
<div>num contexts restored: <span id="restored">0</span></div>
<div>num contexts active: <span id="active">0</span></div>

CSS

body { font-family: monospace; }

JavaScript

const canvases = [];
const createdElem = document.querySelector('#created');
const lostElem = document.querySelector('#lost');
const restoredElem = document.querySelector('#restored');
const activeElem = document.querySelector('#active');
let numLost = 0;
let numRestored = 0;
let numActive = 0;

function createCanvas() {
  const canvas = document.createElement('canvas');
  canvas.addEventListener('webglcontextlost', (e) => {
    e.preventDefault();  // allowes context to be restored
    lostElem.textContent = ++numLost;
    activeElem.textContent = --numActive;
  });
  canvas.addEventListener('webglcontextrestored', (e) => {
    lostElem.textContent = --numLost;
    restoredElem.textContent = ++numRestored;
    activeElem.textContent = ++numActive;
  });
  const gl = canvas.getContext('webgl');
  canvases.push(canvas);
  createdElem.textContent = canvases.length;
  activeElem.textContent = ++numActive;
}

document.querySelector('button').addEventListener('click', createCanvas);