Improve canvas fallback

2 files changed, 22 insertions, 5 deletions

diff --git a/canvasWorker.js b/canvasWorker.js
index 04a2e1b..51878f6 100644
--- a/canvasWorker.js
+++ b/canvasWorker.js
@@ -88,11 +88,26 @@ self.onmessage = (msg) => {
     useWebGL = msg.data.useWebGL;
     if (useWebGL) {
       console.log("using WebGL");
-      gl = canvas.getContext("webgl", { preserveDrawingBuffer: true });
-      if (!gl) return self.onmessage({ canvas, useWebGL: false });
+      // i hate this
+      try {
+        gl = canvas.getContext("webgl", { preserveDrawingBuffer: true });
+        if (!gl)
+          gl = canvas.getContext("experimental-webgl", {
+            preserveDrawingBuffer: true,
+          });
+      } catch (e) {
+      } finally {
+        if (!gl) {
+          console.error("WebGL not supported, using canvas instead.");
+          useWebGL = false;
+          gl = canvas.getContext("2d");
+          return;
+        }
+      }
       gl.viewport(0, 0, canvas.width, canvas.height);
       draw = initGL();
     } else {
+      useWebGL = false;
       console.log("using canvas");
       gl = canvas.getContext("2d");
     }
diff --git a/index.html b/index.html
index 6dba53a..5523cf2 100644
--- a/index.html
+++ b/index.html
@@ -139,10 +139,12 @@ qsplit = \(0 \\\\\((((0 ((4 \((((0 \\1) \\1) \\1) \\1)) \((((0 \\0) \\0) \\0) \\
     <script src="main.js"></script>
     <script charset="utf-8">
       let useWebGL = true;
-      const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
-      if (isMobile) {
+      const isWeird = /iPhone|iPad|iPod|Android|AppleWebKit/i.test(
+        navigator.userAgent,
+      );
+      if (isWeird) {
         useWebGL = false;
-        MAXRES = 10;
+        MAXRES = 3;
       }
 
       const canvas = window.canvas;