Lose and Restore WebGL Context

CSS

canvas { display: block; border: 1px solid black; }

JavaScript

function setup(id) {
  const canvas = document.createElement('canvas');
  document.body.append(canvas);
  const logElem = document.createElement('div');
  document.body.append(logElem);
  let lostCount = 0;
  let restoredCount = 0;

  function render() {
    const gl = canvas.getContext("webgl");

    if (!gl.isContextLost()) {
      ++frameCount;
    }
    
    gl.clearColor(frameCount % 256 / 255, 1, 1, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.flush();
    
    requestAnimationFrame(render);
  }  

  canvas.addEventListener('webglcontextlost', e => {
    ++lostCount;
    updateLog();
    e.preventDefault();
  });
  canvas.addEventListener('webglcontextrestored', e => {
    ++restoredCount;
    updateLog();
    render();
  });
  
  function updateLog() {
    logElem.textContent = `lost: ${lostCount}, restored: ${restoredCount}`;
  }
  
  
  let frameCount = 0;
  requestAnimationFrame(render);
  updateLog();
  
}

for (i=0; i<20; i++) {
  setup(i);
}