fix demo in epiphany

addons/xterm-addon-canvas/src/BaseRenderLayer.ts

@@ -373,6 +373,9 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
     } else {
       glyph = this._charAtlas.getRasterizedGlyph(cell.getCode() || WHITESPACE_CELL_CODE, this._cellColorResolver.result.bg, this._cellColorResolver.result.fg, this._cellColorResolver.result.ext);
     }
+    if (!glyph.size.x || !glyph.size.y) {
+      return;
+    }
     this._ctx.save();
     this._clipRow(y);
     // Draw the image, use the bitmap if it's available

addons/xterm-addon-canvas/src/TextRenderLayer.ts

@@ -95,6 +95,12 @@ export class TextRenderLayer extends BaseRenderLayer {
           continue;
         }
 
+        // exit early for NULL and SP
+        const code = cell.getCode();
+        if (code === 0 || code === 32) {
+          continue;
+        }
+
         // Process any joined character ranges as needed. Because of how the
         // ranges are produced, we know that they are valid for the characters
         // and attributes of our input.

demo/client.ts

@@ -273,22 +273,22 @@ function createTerminal(): void {
   socketURL = protocol + location.hostname + ((location.port) ? (':' + location.port) : '') + '/terminals/';
 
   addons.fit.instance!.fit();
-  typedTerm.loadAddon(addons.webgl.instance);
-  setTimeout(() => {
-    if (addons.webgl.instance !== undefined) {
-      setTextureAtlas(addons.webgl.instance.textureAtlas);
-      addons.webgl.instance.onChangeTextureAtlas(e => setTextureAtlas(e));
-      addons.webgl.instance.onAddTextureAtlasCanvas(e => appendTextureAtlas(e));
-      addons.webgl.instance.onRemoveTextureAtlasCanvas(e => removeTextureAtlas(e));
-    }
-  }, 0);
 
-  try { // try-catch to allow the demo to load if webgl is not supported
+  // try to start with webgl renderer (might throw on older safari/webkit)
+  try {
+    typedTerm.loadAddon(addons.webgl.instance);
     term.open(terminalContainer);
-  }
-  catch {
+    setTextureAtlas(addons.webgl.instance.textureAtlas);
+    addons.webgl.instance.onChangeTextureAtlas(e => setTextureAtlas(e));
+    addons.webgl.instance.onAddTextureAtlasCanvas(e => appendTextureAtlas(e));
+    addons.webgl.instance.onRemoveTextureAtlasCanvas(e => removeTextureAtlas(e));
+  } catch (e) {
+    console.log(e);
+    addons.webgl.instance.dispose();
     addons.webgl.instance = undefined;
+    term.open(terminalContainer);
   }
+
   term.focus();
 
   addDomListener(paddingElement, 'change', setPadding);