Add error logging util

index.html

@@ -9,6 +9,7 @@
     <canvas id="canvas" width="1200px" height="600px">
       HTML5 Canvas is not supported.
     </canvas>
+    <div id="errorText"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

src/debug.ts

@@ -0,0 +1,10 @@
+export function showError(error: any) {
+  const p = document.querySelector<HTMLDivElement>("#errorText");
+  if (p) {
+    const newErrorText = document.createElement("p");
+    newErrorText.innerText = error;
+    p.appendChild(newErrorText);
+  }
+  
+  console.error(error);
+}

src/main.ts

@@ -1 +1,20 @@
+import { showError } from "./debug";
 import "./style.css";
+
+function render() {
+  const canvas = document.querySelector<HTMLCanvasElement>("#canvas");
+  if (!canvas) {
+    throw new Error("Canvas does not exist");
+  }
+
+  const gl = canvas.getContext("webgl");
+  if (!gl) {
+    throw new Error("This browser does not support WebGL");
+  }
+}
+
+try {
+  render();
+} catch (err) {
+  showError(err);
+}

src/style.css

@@ -5,6 +5,7 @@ html, head, body {
 
 body {
   display: flex;
+  flex-direction: column;
   height: 100vh;
   padding: 1rem;
   box-sizing: border-box;
@@ -18,3 +19,12 @@ body {
   background-color: #da6052;
   image-rendering: crisp-edges;
 }
+
+#errorText {
+  color: #de5243;
+  text-align: center;
+}
+
+#errorText p {
+  font-size: 2rem;
+}