Move the default WebGL context lost message to the default shell.html file so that default applications still show the error message, and applications can easily override the behavior if/when they see fit.

2 files changed, 20 insertions, 2 deletions

diff --git a/src/shell.html b/src/shell.html
index 1e213024..d204bfa6 100644
--- a/src/shell.html
+++ b/src/shell.html
@@ -1245,7 +1245,16 @@
             console.error(text);
           }
         },
-        canvas: document.getElementById('canvas'),
+        canvas: (function() {
+          var canvas = document.getElementById('canvas');
+
+          // As a default initial behavior, pop up an alert when webgl context is lost. To make your
+          // application robust, you may want to override this behavior before shipping!
+          // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
+          canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
+
+          return canvas;
+        })(),
         setStatus: function(text) {
           if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
           if (text === Module.setStatus.text) return;
diff --git a/src/shell_minimal.html b/src/shell_minimal.html
index 7dd67929..b67c6fdd 100644
--- a/src/shell_minimal.html
+++ b/src/shell_minimal.html
@@ -101,7 +101,16 @@
             console.error(text);
           }
         },
-        canvas: document.getElementById('canvas'),
+        canvas: (function() {
+          var canvas = document.getElementById('canvas');
+
+          // As a default initial behavior, pop up an alert when webgl context is lost. To make your
+          // application robust, you may want to override this behavior before shipping!
+          // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
+          canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
+
+          return canvas;
+        })(),
         setStatus: function(text) {
           if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
           if (text === Module.setStatus.text) return;