Suppressing the "Rats! WebGL hit a snag." error bar in Google Chrome

Question

I've recently started using WebGL on a site I'm developing. It's being used as an enhancement, and the site falls back to a canvas rendering if WebGL is not supported or has an error.

Unfortunately when a WebGL exception occurs in Google Chrome, an error message bar appears. This bar does not disappear until the user interacts with it. If they reload or navigate to a different page, the message will re-appear the next time the site tries to use WebGL.

In the case of my site, this means that the WebGL error message will never go away because each page attempts to use WebGL. Once an error has occurred Chrome will not use WebGL again on the same site until the user tells it to Reload, so the continuous error message doesn't actually indicate continuous errors, just continuous attempts to use WebGL.

---

Once a WebGL error occurs, this dialog can be reproduced on that site just by running:

document.createElement('canvas').getContext('experimental-webgl');

This does not raise any exception, and my .onerror method on the canvas element wasn't called.

I haven't been able to investigate this too deeply because I have not been able to reliably reproduce a WebGL error. (Even if I could reproduce one on my computer, it may not be reproducible on others.)

---

This behaviour would be reasonable for a site that relied on WebGL, but mine does not, so the message is just distracting and confusing to users.

Is there any way to suppress this error message? I don't mind falling back to the Ignore behaviour of having WebGL disabled once an error occurs.

Answer 1

If you want to ignore the exception, then the following should be enough.

canvas.addEventListener("webglcontextlost", function(e) { e.preventDefault(); Stopdrawing(); }, false); 

If you want to retry loading the webgl context

canvas.addEventListener("webglcontextrestored", function (event) {initializeResources();  }, false);

EDIT:

If you want to test if the context get handled correctly then make use of the WEBGL_lose_context extension on the webgl context.

gl.getExtension("WEBGL_lose_context").loseContext()
gl.getExtension("WEBGL_lose_context").restoreContext()