title: How do I prevent Chrome from disposing(?) of my webgl drawing context after switching tabs?
body: <p>I'm having an unexpected issue with Chrome (current).  I've got a web application that uses webGL canvas to do some basic image manipulation and later copies the webGl canvas to a 2d canvas in order to save off the image data.  The problem is that the drawing context of the webgl canvas appears to get lost in Chrome after I switch tabs.  This doesn't happen in any other browser that I've tried (FF, IE 11/Edge, Safari). </p>
  
  <p>I would expect Chrome to also fire the webgl context lost event if this is indeed what is happening, but I never get that event. </p>
  
  <p>Here's a very simple fiddle that demonstrates the issue.  </p>
  
  <p><a href="https://jsfiddle.net/JoeBlow/m14evgzj/" rel="nofollow noreferrer">https://jsfiddle.net/JoeBlow/m14evgzj/</a></p>
  
  <p>1) Load page that draws to a webgl canvas</p>
  
  <p>2) Switch to a new tab</p>
  
  <p>3) Switch back to original tab</p>
  
  <p>4) Click 'Copy Image'. </p>
  
  <p>If I reinitialize the 3d canvas (reload everything and re-draw), then everything works as expected even after a tab switch, but I was trying to avoid capturing the blur/focus events on the window/viewport.</p>
  
  <p>here's the simplified code:</p>
  
  <pre><code>window.canvasSource  = document.getElementById("source");
  var canvasDestination = document.getElementById("destination");
  var buttonCopy = document.getElementById("btnCopy");
  var btnToggle = document.getElementById("btnToggle");
  var btnClear = document.getElementById("btnClear");
  var btnInit3d = document.getElementById('btnInit3d');
  
  var canvasOptions = { preserveDrawingBuffer: true };
  
  //var sourceContext = canvasSource.getContext("2d", options);
  var destinationContext = canvasDestination.getContext("2d", canvasOptions);
  
  window.canvasSource.addEventListener("webglcontextlost", function(event) {
  console.log('context lost');
      event.preventDefault();
  }, false);
  
  window.canvasSource.addEventListener("webglcontextrestored", init3d, false);
  
  btnToggle.addEventListener('click', function() {
      if (window.canvasSource.style.visibility != "hidden") {
        window.canvasSource.style['visibility']='hidden';
      }
    else {
     window.canvasSource.style['visibility'] = 'visible';
    }
  });
  
  btnCopy.addEventListener('click', function() {
      destinationContext.drawImage(window.canvasSource,0,0);
  });
  
  btnClear.addEventListener('click', function() {
      destinationContext.clearRect(0,0, 1500, 1500);
  });
  
  btnInit3d.addEventListener('click', function() {
      init3d();
  });
  
  function init3d() {
  console.log('init3d()');
  window.gl = window.canvasSource.getContext("webgl", canvasOptions);
  var gl = window.gl;
  if (gl==null)
   console.log("couldn't get webgl context");
  else 
   console.log(gl);
  
  gl.viewport(0, 0, window.canvasSource.width, window.canvasSource.height);
  gl.clearColor(0, 0.5, 0, 1);
  gl.clear(gl.COLOR_BUFFER_BIT);
  
  var v = document.getElementById("vertex").firstChild.nodeValue;
  var f = document.getElementById("fragment").firstChild.nodeValue;
  
  var vs = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(vs, v);
  gl.compileShader(vs);
  
  var fs = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(fs, f);
  gl.compileShader(fs);
  
  program = gl.createProgram();
  gl.attachShader(program, vs);
  gl.attachShader(program, fs);
  gl.linkProgram(program);
  }
  
  init3d();
  </code></pre>