Show canvas texture atlas on demo

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

@@ -52,6 +52,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
   };
 
   public get canvas(): HTMLCanvasElement { return this._canvas; }
+  public get cacheCanvas(): HTMLCanvasElement { return this._charAtlas?.cacheCanvas!; }
 
   constructor(
     private readonly _terminal: Terminal,

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

@@ -8,11 +8,15 @@ import { IColorSet } from 'browser/Types';
 import { CanvasRenderer } from './CanvasRenderer';
 import { IBufferService, ICoreService, IDecorationService, IOptionsService } from 'common/services/Services';
 import { ITerminalAddon, Terminal } from 'xterm';
+import { EventEmitter, forwardEvent } from 'common/EventEmitter';
 
 export class CanvasAddon implements ITerminalAddon {
   private _terminal?: Terminal;
   private _renderer?: CanvasRenderer;
 
+  private readonly _onChangeTextureAtlas = new EventEmitter<HTMLElement>();
+  public readonly onChangeTextureAtlas = this._onChangeTextureAtlas.event;
+
   public activate(terminal: Terminal): void {
     if (!terminal.element) {
       throw new Error('Cannot activate CanvasAddon before Terminal.open');
@@ -30,6 +34,7 @@ export class CanvasAddon implements ITerminalAddon {
     const screenElement: HTMLElement = (terminal as any)._core.screenElement;
     const linkifier = (terminal as any)._core.linkifier2;
     this._renderer = new CanvasRenderer(terminal, colors, screenElement, linkifier, bufferService, charSizeService, optionsService, characterJoinerService, coreService, coreBrowserService, decorationService);
+    forwardEvent(this._renderer.onChangeTextureAtlas, this._onChangeTextureAtlas);
     renderService.setRenderer(this._renderer);
     renderService.onResize(bufferService.cols, bufferService.rows);
   }
@@ -44,4 +49,8 @@ export class CanvasAddon implements ITerminalAddon {
     this._renderer?.dispose();
     this._renderer = undefined;
   }
+
+  public get textureAtlas(): HTMLCanvasElement | undefined {
+    return this._renderer?.textureAtlas;
+  }
 }

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

@@ -14,15 +14,11 @@ import { IColorSet, ILinkifier2 } from 'browser/Types';
 import { ICharacterJoinerService, ICharSizeService, ICoreBrowserService } from 'browser/services/Services';
 import { IBufferService, IOptionsService, IDecorationService, ICoreService } from 'common/services/Services';
 import { removeTerminalFromCache } from './atlas/CharAtlasCache';
-import { EventEmitter, IEvent } from 'common/EventEmitter';
+import { EventEmitter } from 'common/EventEmitter';
 import { observeDevicePixelDimensions } from 'browser/renderer/shared/DevicePixelObserver';
 import { Terminal } from 'xterm';
 
-let nextRendererId = 1;
-
 export class CanvasRenderer extends Disposable implements IRenderer {
-  private _id = nextRendererId++;
-
   private _renderLayers: IRenderLayer[];
   private _devicePixelRatio: number;
 
@@ -30,6 +26,8 @@ export class CanvasRenderer extends Disposable implements IRenderer {
 
   private readonly _onRequestRedraw = new EventEmitter<IRequestRedrawEvent>();
   public readonly onRequestRedraw = this._onRequestRedraw.event;
+  private readonly _onChangeTextureAtlas = new EventEmitter<HTMLCanvasElement>();
+  public readonly onChangeTextureAtlas = this._onChangeTextureAtlas.event;
 
   constructor(
     private readonly _terminal: Terminal,
@@ -82,6 +80,10 @@ export class CanvasRenderer extends Disposable implements IRenderer {
     removeTerminalFromCache(this._terminal);
   }
 
+  public get textureAtlas(): HTMLCanvasElement | undefined {
+    return this._renderLayers[0].cacheCanvas;
+  }
+
   public onDevicePixelRatioChange(): void {
     // If the device pixel ratio changed, the char atlas needs to be regenerated
     // and the terminal needs to refreshed

addons/xterm-addon-canvas/src/Types.d.ts

@@ -58,6 +58,7 @@ export interface IRenderer extends IDisposable {
 
 export interface IRenderLayer extends IDisposable {
   readonly canvas: HTMLCanvasElement;
+  readonly cacheCanvas: HTMLCanvasElement;
 
   /**
    * Called when the terminal loses focus.

addons/xterm-addon-canvas/src/atlas/BaseCharAtlas.ts

@@ -8,6 +8,7 @@ import { IDisposable } from 'common/Types';
 
 export abstract class BaseCharAtlas implements IDisposable {
   private _didWarmUp: boolean = false;
+  public abstract readonly cacheCanvas: HTMLCanvasElement;
 
   public dispose(): void { }
 

addons/xterm-addon-canvas/src/atlas/DynamicCharAtlas.ts

@@ -111,6 +111,10 @@ export class DynamicCharAtlas extends BaseCharAtlas {
     }
   }
 
+  public override get cacheCanvas(): HTMLCanvasElement {
+    return this._cacheCanvas!;
+  }
+
   public beginFrame(): void {
     this._drawToCacheCount = 0;
   }
@@ -374,6 +378,10 @@ export class NoneCharAtlas extends BaseCharAtlas {
     super();
   }
 
+  public override get cacheCanvas(): HTMLCanvasElement {
+    return null!;
+  }
+
   public draw(
     ctx: CanvasRenderingContext2D,
     glyph: IGlyphIdentifier,

addons/xterm-addon-canvas/typings/xterm-addon-canvas.d.ts

@@ -12,6 +12,11 @@ declare module 'xterm-addon-canvas' {
   export class CanvasAddon implements ITerminalAddon {
     public textureAtlas?: HTMLCanvasElement;
 
+    /**
+     * An event that is fired when the texture atlas of the renderer changes.
+     */
+    public readonly onChangeTextureAtlas: IEvent<HTMLCanvasElement>;
+
     constructor();
 
     /**

demo/client.ts

@@ -545,7 +545,15 @@ function initAddons(term: TerminalType): void {
         try {
           term.loadAddon(addon.instance);
           if (name === 'webgl') {
-            (addon.instance as WebglAddon).onChangeTextureAtlas(e => addTextureAtlas(e));
+            setTimeout(() => {
+              addTextureAtlas(addons.webgl.instance.textureAtlas);
+              addons.webgl.instance.onChangeTextureAtlas(e => addTextureAtlas(e));
+            }, 0);
+          } else if (name === 'canvas') {
+            setTimeout(() => {
+              addTextureAtlas(addons.canvas.instance.textureAtlas);
+              addons.canvas.instance.onChangeTextureAtlas(e => addTextureAtlas(e));
+            }, 0);
           } else if (name === 'unicode11') {
             term.unicode.activeVersion = '11';
           } else if (name === 'search') {
@@ -559,7 +567,9 @@ function initAddons(term: TerminalType): void {
         }
       } else {
         if (name === 'webgl') {
-          (addon.instance as WebglAddon).textureAtlas.remove();
+          addons.webgl.instance.textureAtlas.remove();
+        } else if (name === 'canvas') {
+          addons.canvas.instance.textureAtlas.remove();
         } else if (name === 'unicode11') {
           term.unicode.activeVersion = '6';
         }