Change canvas transparency when option is updated

src/renderer/BaseRenderLayer.ts

@@ -54,6 +54,26 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     this._refreshCharAtlas(terminal, colorSet);
   }
 
+  protected setTransparency(terminal: ITerminal, alpha: boolean): void {
+    if (alpha === this._alpha) {
+      return;
+    }
+    this._alpha = alpha
+    const oldCanvas = this._canvas
+    // Cloning preserves canvas properties and permits to acquire a new context 
+    this._canvas = <HTMLCanvasElement>this._canvas.cloneNode();
+    this._ctx = this._canvas.getContext('2d', {alpha: this._alpha});
+    this._ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+    // Draw the background if this is an opaque layer
+    if (!this._alpha) {
+      this.clearAll();
+    }
+    oldCanvas.parentNode.replaceChild(this._canvas, oldCanvas);
+    this._refreshCharAtlas(terminal, this._colors);
+    // Force a full redraw
+    this.onGridChanged(terminal, 0, terminal.rows - 1)
+  }
+
   /**
    * Refreshes the char atlas, aquiring a new one if necessary.
    * @param terminal The terminal.
@@ -64,7 +84,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
       return;
     }
     this._charAtlas = null;
-    const result = acquireCharAtlas(terminal, this._colors, this._scaledCharWidth, this._scaledCharHeight);
+    const result = acquireCharAtlas(terminal, colorSet, this._scaledCharWidth, this._scaledCharHeight);
     if (result instanceof HTMLCanvasElement) {
       this._charAtlas = result;
     } else {

src/renderer/CharAtlas.ts

@@ -17,6 +17,7 @@ interface ICharAtlasConfig {
   fontWeightBold: string;
   scaledCharWidth: number;
   scaledCharHeight: number;
+  allowTransparency: boolean;
   colors: IColorSet;
 }
 
@@ -112,6 +113,7 @@ function generateConfig(scaledCharWidth: number, scaledCharHeight: number, termi
     fontSize: terminal.options.fontSize,
     fontWeight: terminal.options.fontWeight,
     fontWeightBold: terminal.options.fontWeightBold,
+    allowTransparency: terminal.options.allowTransparency,
     colors: clonedColors
   };
 }
@@ -126,6 +128,7 @@ function configEquals(a: ICharAtlasConfig, b: ICharAtlasConfig): boolean {
       a.fontSize === b.fontSize &&
       a.fontWeight === b.fontWeight &&
       a.fontWeightBold === b.fontWeightBold &&
+      a.allowTransparency === b.allowTransparency &&
       a.scaledCharWidth === b.scaledCharWidth &&
       a.scaledCharHeight === b.scaledCharHeight &&
       a.colors.foreground === b.colors.foreground &&

src/renderer/TextRenderLayer.ts

@@ -192,6 +192,10 @@ export class TextRenderLayer extends BaseRenderLayer {
     }
   }
 
+  public onOptionsChanged(terminal: ITerminal): void {
+    this.setTransparency(terminal, terminal.options.allowTransparency);
+  }
+
   /**
    * Whether a character is overlapping to the next cell.
    */