diff --git a/src/browser/renderer/BaseRenderLayer.ts b/addons/xterm-addon-canvas/src/BaseRenderLayer.ts
similarity index 98%
rename from src/browser/renderer/BaseRenderLayer.ts
rename to addons/xterm-addon-canvas/src/BaseRenderLayer.ts
index 0a9b8057..54038cc0 100644
--- a/src/browser/renderer/BaseRenderLayer.ts
+++ b/addons/xterm-addon-canvas/src/BaseRenderLayer.ts
@@ -3,13 +3,14 @@
  * @license MIT
  */
 
-import { IRenderDimensions, IRenderLayer } from 'browser/renderer/Types';
+import { IRenderDimensions } from 'browser/renderer/Types';
+import { IRenderLayer } from './Types';
 import { ICellData, IColor } from 'common/Types';
 import { DEFAULT_COLOR, WHITESPACE_CELL_CHAR, WHITESPACE_CELL_CODE, Attributes } from 'common/buffer/Constants';
-import { IGlyphIdentifier } from 'browser/renderer/atlas/Types';
-import { DIM_OPACITY, INVERTED_DEFAULT_COLOR, TEXT_BASELINE } from 'browser/renderer/atlas/Constants';
-import { BaseCharAtlas } from 'browser/renderer/atlas/BaseCharAtlas';
-import { acquireCharAtlas } from 'browser/renderer/atlas/CharAtlasCache';
+import { IGlyphIdentifier } from './atlas/Types';
+import { DIM_OPACITY, INVERTED_DEFAULT_COLOR, TEXT_BASELINE } from 'browser/renderer/Constants';
+import { BaseCharAtlas } from './atlas/BaseCharAtlas';
+import { acquireCharAtlas } from './atlas/CharAtlasCache';
 import { AttributeData } from 'common/buffer/AttributeData';
 import { IColorSet } from 'browser/Types';
 import { CellData } from 'common/buffer/CellData';
@@ -17,7 +18,7 @@ import { IBufferService, IDecorationService, IOptionsService } from 'common/serv
 import { excludeFromContrastRatioDemands, throwIfFalsy } from 'browser/renderer/RendererUtils';
 import { channels, color, rgba } from 'common/Color';
 import { removeElementFromParent } from 'browser/Dom';
-import { tryDrawCustomChar } from 'browser/renderer/CustomGlyphs';
+import { tryDrawCustomChar } from './CustomGlyphs';
 
 export abstract class BaseRenderLayer implements IRenderLayer {
   private _canvas: HTMLCanvasElement;
diff --git a/src/browser/renderer/CursorRenderLayer.ts b/addons/xterm-addon-canvas/src/CursorRenderLayer.ts
similarity index 99%
rename from src/browser/renderer/CursorRenderLayer.ts
rename to addons/xterm-addon-canvas/src/CursorRenderLayer.ts
index 3fa576a9..60c1301d 100644
--- a/src/browser/renderer/CursorRenderLayer.ts
+++ b/addons/xterm-addon-canvas/src/CursorRenderLayer.ts
@@ -4,7 +4,7 @@
  */
 
 import { IRenderDimensions, IRequestRedrawEvent } from 'browser/renderer/Types';
-import { BaseRenderLayer } from 'browser/renderer/BaseRenderLayer';
+import { BaseRenderLayer } from './BaseRenderLayer';
 import { ICellData } from 'common/Types';
 import { CellData } from 'common/buffer/CellData';
 import { IColorSet } from 'browser/Types';
diff --git a/src/browser/renderer/CustomGlyphs.ts b/addons/xterm-addon-canvas/src/CustomGlyphs.ts
similarity index 100%
rename from src/browser/renderer/CustomGlyphs.ts
rename to addons/xterm-addon-canvas/src/CustomGlyphs.ts
diff --git a/src/browser/renderer/GridCache.test.ts b/addons/xterm-addon-canvas/src/GridCache.test.ts
similarity index 96%
rename from src/browser/renderer/GridCache.test.ts
rename to addons/xterm-addon-canvas/src/GridCache.test.ts
index 30d22e81..c4b1c220 100644
--- a/src/browser/renderer/GridCache.test.ts
+++ b/addons/xterm-addon-canvas/src/GridCache.test.ts
@@ -4,7 +4,7 @@
  */
 
 import { assert } from 'chai';
-import { GridCache } from 'browser/renderer/GridCache';
+import { GridCache } from './GridCache';
 
 describe('GridCache', () => {
   let grid: GridCache<number>;
diff --git a/src/browser/renderer/GridCache.ts b/addons/xterm-addon-canvas/src/GridCache.ts
similarity index 100%
rename from src/browser/renderer/GridCache.ts
rename to addons/xterm-addon-canvas/src/GridCache.ts
diff --git a/src/browser/renderer/LinkRenderLayer.ts b/addons/xterm-addon-canvas/src/LinkRenderLayer.ts
similarity index 94%
rename from src/browser/renderer/LinkRenderLayer.ts
rename to addons/xterm-addon-canvas/src/LinkRenderLayer.ts
index f1a9b13e..f92f6d54 100644
--- a/src/browser/renderer/LinkRenderLayer.ts
+++ b/addons/xterm-addon-canvas/src/LinkRenderLayer.ts
@@ -5,8 +5,8 @@
 
 import { IRenderDimensions } from 'browser/renderer/Types';
 import { BaseRenderLayer } from './BaseRenderLayer';
-import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/atlas/Constants';
-import { is256Color } from 'browser/renderer/atlas/CharAtlasUtils';
+import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/Constants';
+import { is256Color } from './atlas/CharAtlasUtils';
 import { IColorSet, ILinkifierEvent, ILinkifier2 } from 'browser/Types';
 import { IBufferService, IDecorationService, IOptionsService } from 'common/services/Services';
 
diff --git a/src/browser/renderer/Renderer.ts b/addons/xterm-addon-canvas/src/Renderer.ts
similarity index 94%
rename from src/browser/renderer/Renderer.ts
rename to addons/xterm-addon-canvas/src/Renderer.ts
index 66597931..629f69f4 100644
--- a/src/browser/renderer/Renderer.ts
+++ b/addons/xterm-addon-canvas/src/Renderer.ts
@@ -3,16 +3,17 @@
  * @license MIT
  */
 
-import { TextRenderLayer } from 'browser/renderer/TextRenderLayer';
-import { SelectionRenderLayer } from 'browser/renderer/SelectionRenderLayer';
-import { CursorRenderLayer } from 'browser/renderer/CursorRenderLayer';
-import { IRenderLayer, IRenderer, IRenderDimensions, IRequestRedrawEvent } from 'browser/renderer/Types';
-import { LinkRenderLayer } from 'browser/renderer/LinkRenderLayer';
+import { TextRenderLayer } from './TextRenderLayer';
+import { SelectionRenderLayer } from './SelectionRenderLayer';
+import { CursorRenderLayer } from './CursorRenderLayer';
+import { IRenderer, IRenderDimensions, IRequestRedrawEvent } from 'browser/renderer/Types';
+import { IRenderLayer } from './Types';
+import { LinkRenderLayer } from './LinkRenderLayer';
 import { Disposable } from 'common/Lifecycle';
 import { IColorSet, ILinkifier2 } from 'browser/Types';
 import { ICharSizeService } from 'browser/services/Services';
 import { IBufferService, IOptionsService, IInstantiationService } from 'common/services/Services';
-import { removeTerminalFromCache } from 'browser/renderer/atlas/CharAtlasCache';
+import { removeTerminalFromCache } from './atlas/CharAtlasCache';
 import { EventEmitter, IEvent } from 'common/EventEmitter';
 
 let nextRendererId = 1;
diff --git a/src/browser/renderer/SelectionRenderLayer.ts b/addons/xterm-addon-canvas/src/SelectionRenderLayer.ts
similarity index 98%
rename from src/browser/renderer/SelectionRenderLayer.ts
rename to addons/xterm-addon-canvas/src/SelectionRenderLayer.ts
index ce4fe071..2fa82c0d 100644
--- a/src/browser/renderer/SelectionRenderLayer.ts
+++ b/addons/xterm-addon-canvas/src/SelectionRenderLayer.ts
@@ -4,7 +4,7 @@
  */
 
 import { IRenderDimensions } from 'browser/renderer/Types';
-import { BaseRenderLayer } from 'browser/renderer/BaseRenderLayer';
+import { BaseRenderLayer } from './BaseRenderLayer';
 import { IColorSet } from 'browser/Types';
 import { IBufferService, IDecorationService, IOptionsService } from 'common/services/Services';
 
diff --git a/src/browser/renderer/TextRenderLayer.ts b/addons/xterm-addon-canvas/src/TextRenderLayer.ts
similarity index 98%
rename from src/browser/renderer/TextRenderLayer.ts
rename to addons/xterm-addon-canvas/src/TextRenderLayer.ts
index ef5a9b62..ea5fea0b 100644
--- a/src/browser/renderer/TextRenderLayer.ts
+++ b/addons/xterm-addon-canvas/src/TextRenderLayer.ts
@@ -5,8 +5,8 @@
 
 import { IRenderDimensions } from 'browser/renderer/Types';
 import { CharData, ICellData } from 'common/Types';
-import { GridCache } from 'browser/renderer/GridCache';
-import { BaseRenderLayer } from 'browser/renderer/BaseRenderLayer';
+import { GridCache } from './GridCache';
+import { BaseRenderLayer } from './BaseRenderLayer';
 import { AttributeData } from 'common/buffer/AttributeData';
 import { NULL_CELL_CODE, Content } from 'common/buffer/Constants';
 import { IColorSet } from 'browser/Types';
diff --git a/addons/xterm-addon-canvas/src/Types.d.ts b/addons/xterm-addon-canvas/src/Types.d.ts
new file mode 100644
index 00000000..6f5aff85
--- /dev/null
+++ b/addons/xterm-addon-canvas/src/Types.d.ts
@@ -0,0 +1,110 @@
+/**
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { IDisposable } from 'common/Types';
+import { IColorSet } from 'browser/Types';
+import { IEvent } from 'common/EventEmitter';
+
+// TODO: Use core interfaces
+export interface IRenderDimensions {
+  scaledCharWidth: number;
+  scaledCharHeight: number;
+  scaledCellWidth: number;
+  scaledCellHeight: number;
+  scaledCharLeft: number;
+  scaledCharTop: number;
+  scaledCanvasWidth: number;
+  scaledCanvasHeight: number;
+  canvasWidth: number;
+  canvasHeight: number;
+  actualCellWidth: number;
+  actualCellHeight: number;
+}
+
+export interface IRequestRedrawEvent {
+  start: number;
+  end: number;
+}
+
+/**
+ * Note that IRenderer implementations should emit the refresh event after
+ * rendering rows to the screen.
+ */
+export interface IRenderer extends IDisposable {
+  readonly dimensions: IRenderDimensions;
+
+  /**
+   * Fires when the renderer is requesting to be redrawn on the next animation
+   * frame but is _not_ a result of content changing (eg. selection changes).
+   */
+  readonly onRequestRedraw: IEvent<IRequestRedrawEvent>;
+
+  dispose(): void;
+  setColors(colors: IColorSet): void;
+  onDevicePixelRatioChange(): void;
+  onResize(cols: number, rows: number): void;
+  onCharSizeChanged(): void;
+  onBlur(): void;
+  onFocus(): void;
+  onSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void;
+  onCursorMove(): void;
+  onOptionsChanged(): void;
+  clear(): void;
+  renderRows(start: number, end: number): void;
+  clearTextureAtlas?(): void;
+}
+
+export interface IRenderLayer extends IDisposable {
+  /**
+   * Called when the terminal loses focus.
+   */
+  onBlur(): void;
+
+  /**
+   * * Called when the terminal gets focus.
+   */
+  onFocus(): void;
+
+  /**
+   * Called when the cursor is moved.
+   */
+  onCursorMove(): void;
+
+  /**
+   * Called when options change.
+   */
+  onOptionsChanged(): void;
+
+  /**
+   * Called when the theme changes.
+   */
+  setColors(colorSet: IColorSet): void;
+
+  /**
+   * Called when the data in the grid has changed (or needs to be rendered
+   * again).
+   */
+  onGridChanged(startRow: number, endRow: number): void;
+
+  /**
+   * Calls when the selection changes.
+   */
+  onSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void;
+
+  /**
+   * Resize the render layer.
+   */
+  resize(dim: IRenderDimensions): void;
+
+  /**
+   * Clear the state of the render layer.
+   */
+  reset(): void;
+
+  /**
+   * Clears the texture atlas.
+   */
+  clearTextureAtlas(): void;
+}
diff --git a/src/browser/renderer/atlas/BaseCharAtlas.ts b/addons/xterm-addon-canvas/src/atlas/BaseCharAtlas.ts
similarity index 96%
rename from src/browser/renderer/atlas/BaseCharAtlas.ts
rename to addons/xterm-addon-canvas/src/atlas/BaseCharAtlas.ts
index 83c30d2f..03cf0285 100644
--- a/src/browser/renderer/atlas/BaseCharAtlas.ts
+++ b/addons/xterm-addon-canvas/src/atlas/BaseCharAtlas.ts
@@ -3,7 +3,7 @@
  * @license MIT
  */
 
-import { IGlyphIdentifier } from 'browser/renderer/atlas/Types';
+import { IGlyphIdentifier } from './Types';
 import { IDisposable } from 'common/Types';
 
 export abstract class BaseCharAtlas implements IDisposable {
diff --git a/src/browser/renderer/atlas/CharAtlasCache.ts b/addons/xterm-addon-canvas/src/atlas/CharAtlasCache.ts
similarity index 89%
rename from src/browser/renderer/atlas/CharAtlasCache.ts
rename to addons/xterm-addon-canvas/src/atlas/CharAtlasCache.ts
index 257835ba..7d020dcc 100644
--- a/src/browser/renderer/atlas/CharAtlasCache.ts
+++ b/addons/xterm-addon-canvas/src/atlas/CharAtlasCache.ts
@@ -3,10 +3,10 @@
  * @license MIT
  */
 
-import { generateConfig, configEquals } from 'browser/renderer/atlas/CharAtlasUtils';
-import { BaseCharAtlas } from 'browser/renderer/atlas/BaseCharAtlas';
-import { DynamicCharAtlas } from 'browser/renderer/atlas/DynamicCharAtlas';
-import { ICharAtlasConfig } from 'browser/renderer/atlas/Types';
+import { generateConfig, configEquals } from './CharAtlasUtils';
+import { BaseCharAtlas } from './BaseCharAtlas';
+import { DynamicCharAtlas } from './DynamicCharAtlas';
+import { ICharAtlasConfig } from './Types';
 import { IColorSet } from 'browser/Types';
 import { ITerminalOptions } from 'common/services/Services';
 
diff --git a/src/browser/renderer/atlas/CharAtlasUtils.ts b/addons/xterm-addon-canvas/src/atlas/CharAtlasUtils.ts
similarity index 96%
rename from src/browser/renderer/atlas/CharAtlasUtils.ts
rename to addons/xterm-addon-canvas/src/atlas/CharAtlasUtils.ts
index 696c6c12..4c84c86a 100644
--- a/src/browser/renderer/atlas/CharAtlasUtils.ts
+++ b/addons/xterm-addon-canvas/src/atlas/CharAtlasUtils.ts
@@ -3,7 +3,7 @@
  * @license MIT
  */
 
-import { ICharAtlasConfig } from 'browser/renderer/atlas/Types';
+import { ICharAtlasConfig } from './Types';
 import { DEFAULT_COLOR } from 'common/buffer/Constants';
 import { IColorSet, IPartialColorSet } from 'browser/Types';
 import { ITerminalOptions } from 'common/services/Services';
diff --git a/src/browser/renderer/atlas/DynamicCharAtlas.ts b/addons/xterm-addon-canvas/src/atlas/DynamicCharAtlas.ts
similarity index 98%
rename from src/browser/renderer/atlas/DynamicCharAtlas.ts
rename to addons/xterm-addon-canvas/src/atlas/DynamicCharAtlas.ts
index 59069879..f5fc2c99 100644
--- a/src/browser/renderer/atlas/DynamicCharAtlas.ts
+++ b/addons/xterm-addon-canvas/src/atlas/DynamicCharAtlas.ts
@@ -3,11 +3,11 @@
  * @license MIT
  */
 
-import { DIM_OPACITY, INVERTED_DEFAULT_COLOR, TEXT_BASELINE } from 'browser/renderer/atlas/Constants';
-import { IGlyphIdentifier, ICharAtlasConfig } from 'browser/renderer/atlas/Types';
-import { BaseCharAtlas } from 'browser/renderer/atlas/BaseCharAtlas';
+import { DIM_OPACITY, INVERTED_DEFAULT_COLOR, TEXT_BASELINE } from 'browser/renderer/Constants';
+import { IGlyphIdentifier, ICharAtlasConfig } from './Types';
+import { BaseCharAtlas } from './BaseCharAtlas';
 import { DEFAULT_ANSI_COLORS } from 'browser/ColorManager';
-import { LRUMap } from 'browser/renderer/atlas/LRUMap';
+import { LRUMap } from './LRUMap';
 import { isFirefox, isSafari } from 'common/Platform';
 import { IColor } from 'common/Types';
 import { throwIfFalsy } from 'browser/renderer/RendererUtils';
diff --git a/src/browser/renderer/atlas/LRUMap.test.ts b/addons/xterm-addon-canvas/src/atlas/LRUMap.test.ts
similarity index 96%
rename from src/browser/renderer/atlas/LRUMap.test.ts
rename to addons/xterm-addon-canvas/src/atlas/LRUMap.test.ts
index 792f85a7..b24ad2af 100644
--- a/src/browser/renderer/atlas/LRUMap.test.ts
+++ b/addons/xterm-addon-canvas/src/atlas/LRUMap.test.ts
@@ -4,7 +4,7 @@
  */
 
 import { assert } from 'chai';
-import { LRUMap } from 'browser/renderer/atlas/LRUMap';
+import { LRUMap } from './LRUMap';
 
 describe('LRUMap', () => {
   it('can be used to store and retrieve values', () => {
diff --git a/src/browser/renderer/atlas/LRUMap.ts b/addons/xterm-addon-canvas/src/atlas/LRUMap.ts
similarity index 100%
rename from src/browser/renderer/atlas/LRUMap.ts
rename to addons/xterm-addon-canvas/src/atlas/LRUMap.ts
diff --git a/src/browser/renderer/atlas/Types.d.ts b/addons/xterm-addon-canvas/src/atlas/Types.d.ts
similarity index 100%
rename from src/browser/renderer/atlas/Types.d.ts
rename to addons/xterm-addon-canvas/src/atlas/Types.d.ts
diff --git a/addons/xterm-addon-canvas/src/tsconfig.json b/addons/xterm-addon-canvas/src/tsconfig.json
index b0c9f6be..1ce2a5e3 100644
--- a/addons/xterm-addon-canvas/src/tsconfig.json
+++ b/addons/xterm-addon-canvas/src/tsconfig.json
@@ -5,6 +5,7 @@
     "lib": [
       "dom",
       "es6",
+      "ES2017.Object"
     ],
     "rootDir": ".",
     "outDir": "../out",
@@ -21,6 +22,7 @@
     },
     "strict": true,
     "downlevelIteration": true,
+    "experimentalDecorators": true,
     "types": [
       "../../../node_modules/@types/mocha"
     ]
diff --git a/addons/xterm-addon-webgl/src/CustomGlyphs.ts b/addons/xterm-addon-webgl/src/CustomGlyphs.ts
new file mode 100644
index 00000000..e6adf5d1
--- /dev/null
+++ b/addons/xterm-addon-webgl/src/CustomGlyphs.ts
@@ -0,0 +1,646 @@
+/**
+ * Copyright (c) 2021 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { throwIfFalsy } from 'browser/renderer/RendererUtils';
+
+interface IBlockVector {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+export const blockElementDefinitions: { [index: string]: IBlockVector[] | undefined } = {
+  // Block elements (0x2580-0x2590)
+  '▀': [{ x: 0, y: 0, w: 8, h: 4 }], // UPPER HALF BLOCK
+  '▁': [{ x: 0, y: 7, w: 8, h: 1 }], // LOWER ONE EIGHTH BLOCK
+  '▂': [{ x: 0, y: 6, w: 8, h: 2 }], // LOWER ONE QUARTER BLOCK
+  '▃': [{ x: 0, y: 5, w: 8, h: 3 }], // LOWER THREE EIGHTHS BLOCK
+  '▄': [{ x: 0, y: 4, w: 8, h: 4 }], // LOWER HALF BLOCK
+  '▅': [{ x: 0, y: 3, w: 8, h: 5 }], // LOWER FIVE EIGHTHS BLOCK
+  '▆': [{ x: 0, y: 2, w: 8, h: 6 }], // LOWER THREE QUARTERS BLOCK
+  '▇': [{ x: 0, y: 1, w: 8, h: 7 }], // LOWER SEVEN EIGHTHS BLOCK
+  '█': [{ x: 0, y: 0, w: 8, h: 8 }], // FULL BLOCK
+  '▉': [{ x: 0, y: 0, w: 7, h: 8 }], // LEFT SEVEN EIGHTHS BLOCK
+  '▊': [{ x: 0, y: 0, w: 6, h: 8 }], // LEFT THREE QUARTERS BLOCK
+  '▋': [{ x: 0, y: 0, w: 5, h: 8 }], // LEFT FIVE EIGHTHS BLOCK
+  '▌': [{ x: 0, y: 0, w: 4, h: 8 }], // LEFT HALF BLOCK
+  '▍': [{ x: 0, y: 0, w: 3, h: 8 }], // LEFT THREE EIGHTHS BLOCK
+  '▎': [{ x: 0, y: 0, w: 2, h: 8 }], // LEFT ONE QUARTER BLOCK
+  '▏': [{ x: 0, y: 0, w: 1, h: 8 }], // LEFT ONE EIGHTH BLOCK
+  '▐': [{ x: 4, y: 0, w: 4, h: 8 }], // RIGHT HALF BLOCK
+
+  // Block elements (0x2594-0x2595)
+  '▔': [{ x: 0, y: 0, w: 9, h: 1 }], // UPPER ONE EIGHTH BLOCK
+  '▕': [{ x: 7, y: 0, w: 1, h: 8 }], // RIGHT ONE EIGHTH BLOCK
+
+  // Terminal graphic characters (0x2596-0x259F)
+  '▖': [{ x: 0, y: 4, w: 4, h: 4 }],                             // QUADRANT LOWER LEFT
+  '▗': [{ x: 4, y: 4, w: 4, h: 4 }],                             // QUADRANT LOWER RIGHT
+  '▘': [{ x: 0, y: 0, w: 4, h: 4 }],                             // QUADRANT UPPER LEFT
+  '▙': [{ x: 0, y: 0, w: 4, h: 8 }, { x: 0, y: 4, w: 8, h: 4 }], // QUADRANT UPPER LEFT AND LOWER LEFT AND LOWER RIGHT
+  '▚': [{ x: 0, y: 0, w: 4, h: 4 }, { x: 4, y: 4, w: 4, h: 4 }], // QUADRANT UPPER LEFT AND LOWER RIGHT
+  '▛': [{ x: 0, y: 0, w: 4, h: 8 }, { x: 4, y: 0, w: 4, h: 4 }], // QUADRANT UPPER LEFT AND UPPER RIGHT AND LOWER LEFT
+  '▜': [{ x: 0, y: 0, w: 8, h: 4 }, { x: 4, y: 0, w: 4, h: 8 }], // QUADRANT UPPER LEFT AND UPPER RIGHT AND LOWER RIGHT
+  '▝': [{ x: 4, y: 0, w: 4, h: 4 }],                             // QUADRANT UPPER RIGHT
+  '▞': [{ x: 4, y: 0, w: 4, h: 4 }, { x: 0, y: 4, w: 4, h: 4 }], // QUADRANT UPPER RIGHT AND LOWER LEFT
+  '▟': [{ x: 4, y: 0, w: 4, h: 8 }, { x: 0, y: 4, w: 8, h: 4 }], // QUADRANT UPPER RIGHT AND LOWER LEFT AND LOWER RIGHT
+
+  // VERTICAL ONE EIGHTH BLOCK-2 through VERTICAL ONE EIGHTH BLOCK-7
+  '\u{1FB70}': [{ x: 1, y: 0, w: 1, h: 8 }],
+  '\u{1FB71}': [{ x: 2, y: 0, w: 1, h: 8 }],
+  '\u{1FB72}': [{ x: 3, y: 0, w: 1, h: 8 }],
+  '\u{1FB73}': [{ x: 4, y: 0, w: 1, h: 8 }],
+  '\u{1FB74}': [{ x: 5, y: 0, w: 1, h: 8 }],
+  '\u{1FB75}': [{ x: 6, y: 0, w: 1, h: 8 }],
+
+  // HORIZONTAL ONE EIGHTH BLOCK-2 through HORIZONTAL ONE EIGHTH BLOCK-7
+  '\u{1FB76}': [{ x: 0, y: 1, w: 8, h: 1 }],
+  '\u{1FB77}': [{ x: 0, y: 2, w: 8, h: 1 }],
+  '\u{1FB78}': [{ x: 0, y: 3, w: 8, h: 1 }],
+  '\u{1FB79}': [{ x: 0, y: 4, w: 8, h: 1 }],
+  '\u{1FB7A}': [{ x: 0, y: 5, w: 8, h: 1 }],
+  '\u{1FB7B}': [{ x: 0, y: 6, w: 8, h: 1 }],
+
+  // LEFT AND LOWER ONE EIGHTH BLOCK
+  '\u{1FB7C}': [{ x: 0, y: 0, w: 1, h: 8 }, { x: 0, y: 7, w: 8, h: 1 }],
+  // LEFT AND UPPER ONE EIGHTH BLOCK
+  '\u{1FB7D}': [{ x: 0, y: 0, w: 1, h: 8 }, { x: 0, y: 0, w: 8, h: 1 }],
+  // RIGHT AND UPPER ONE EIGHTH BLOCK
+  '\u{1FB7E}': [{ x: 7, y: 0, w: 1, h: 8 }, { x: 0, y: 0, w: 8, h: 1 }],
+  // RIGHT AND LOWER ONE EIGHTH BLOCK
+  '\u{1FB7F}': [{ x: 7, y: 0, w: 1, h: 8 }, { x: 0, y: 7, w: 8, h: 1 }],
+  // UPPER AND LOWER ONE EIGHTH BLOCK
+  '\u{1FB80}': [{ x: 0, y: 0, w: 8, h: 1 }, { x: 0, y: 7, w: 8, h: 1 }],
+  // HORIZONTAL ONE EIGHTH BLOCK-1358
+  '\u{1FB81}': [{ x: 0, y: 0, w: 8, h: 1 }, { x: 0, y: 2, w: 8, h: 1 }, { x: 0, y: 4, w: 8, h: 1 }, { x: 0, y: 7, w: 8, h: 1 }],
+
+  // UPPER ONE QUARTER BLOCK
+  '\u{1FB82}': [{ x: 0, y: 0, w: 8, h: 2 }],
+  // UPPER THREE EIGHTHS BLOCK
+  '\u{1FB83}': [{ x: 0, y: 0, w: 8, h: 3 }],
+  // UPPER FIVE EIGHTHS BLOCK
+  '\u{1FB84}': [{ x: 0, y: 0, w: 8, h: 5 }],
+  // UPPER THREE QUARTERS BLOCK
+  '\u{1FB85}': [{ x: 0, y: 0, w: 8, h: 6 }],
+  // UPPER SEVEN EIGHTHS BLOCK
+  '\u{1FB86}': [{ x: 0, y: 0, w: 8, h: 7 }],
+
+  // RIGHT ONE QUARTER BLOCK
+  '\u{1FB87}': [{ x: 6, y: 0, w: 2, h: 8 }],
+  // RIGHT THREE EIGHTHS B0OCK
+  '\u{1FB88}': [{ x: 5, y: 0, w: 3, h: 8 }],
+  // RIGHT FIVE EIGHTHS BL0CK
+  '\u{1FB89}': [{ x: 3, y: 0, w: 5, h: 8 }],
+  // RIGHT THREE QUARTERS 0LOCK
+  '\u{1FB8A}': [{ x: 2, y: 0, w: 6, h: 8 }],
+  // RIGHT SEVEN EIGHTHS B0OCK
+  '\u{1FB8B}': [{ x: 1, y: 0, w: 7, h: 8 }],
+
+  // CHECKER BOARD FILL
+  '\u{1FB95}': [
+    { x: 0, y: 0, w: 2, h: 2 }, { x: 4, y: 0, w: 2, h: 2 },
+    { x: 2, y: 2, w: 2, h: 2 }, { x: 6, y: 2, w: 2, h: 2 },
+    { x: 0, y: 4, w: 2, h: 2 }, { x: 4, y: 4, w: 2, h: 2 },
+    { x: 2, y: 6, w: 2, h: 2 }, { x: 6, y: 6, w: 2, h: 2 }
+  ],
+  // INVERSE CHECKER BOARD FILL
+  '\u{1FB96}': [
+    { x: 2, y: 0, w: 2, h: 2 }, { x: 6, y: 0, w: 2, h: 2 },
+    { x: 0, y: 2, w: 2, h: 2 }, { x: 4, y: 2, w: 2, h: 2 },
+    { x: 2, y: 4, w: 2, h: 2 }, { x: 6, y: 4, w: 2, h: 2 },
+    { x: 0, y: 6, w: 2, h: 2 }, { x: 4, y: 6, w: 2, h: 2 }
+  ],
+  // HEAVY HORIZONTAL FILL (upper middle and lower one quarter block)
+  '\u{1FB97}': [{ x: 0, y: 2, w: 8, h: 2 }, { x: 0, y: 6, w: 8, h: 2 }]
+};
+
+type PatternDefinition = number[][];
+
+/**
+ * Defines the repeating pattern used by special characters, the pattern is made up of a 2d array of
+ * pixel values to be filled (1) or not filled (0).
+ */
+const patternCharacterDefinitions: { [key: string]: PatternDefinition | undefined } = {
+  // Shade characters (0x2591-0x2593)
+  '░': [ // LIGHT SHADE (25%)
+    [1, 0, 0, 0],
+    [0, 0, 0, 0],
+    [0, 0, 1, 0],
+    [0, 0, 0, 0]
+  ],
+  '▒': [ // MEDIUM SHADE (50%)
+    [1, 0],
+    [0, 0],
+    [0, 1],
+    [0, 0]
+  ],
+  '▓': [ // DARK SHADE (75%)
+    [0, 1],
+    [1, 1],
+    [1, 0],
+    [1, 1]
+  ]
+};
+
+const enum Shapes {
+  /** │ */ TOP_TO_BOTTOM = 'M.5,0 L.5,1',
+  /** ─ */ LEFT_TO_RIGHT = 'M0,.5 L1,.5',
+
+  /** └ */ TOP_TO_RIGHT = 'M.5,0 L.5,.5 L1,.5',
+  /** ┘ */ TOP_TO_LEFT = 'M.5,0 L.5,.5 L0,.5',
+  /** ┐ */ LEFT_TO_BOTTOM = 'M0,.5 L.5,.5 L.5,1',
+  /** ┌ */ RIGHT_TO_BOTTOM = 'M0.5,1 L.5,.5 L1,.5',
+
+  /** ╵ */ MIDDLE_TO_TOP = 'M.5,.5 L.5,0',
+  /** ╴ */ MIDDLE_TO_LEFT = 'M.5,.5 L0,.5',
+  /** ╶ */ MIDDLE_TO_RIGHT = 'M.5,.5 L1,.5',
+  /** ╷ */ MIDDLE_TO_BOTTOM = 'M.5,.5 L.5,1',
+
+  /** ┴ */ T_TOP = 'M0,.5 L1,.5 M.5,.5 L.5,0',
+  /** ┤ */ T_LEFT = 'M.5,0 L.5,1 M.5,.5 L0,.5',
+  /** ├ */ T_RIGHT = 'M.5,0 L.5,1 M.5,.5 L1,.5',
+  /** ┬ */ T_BOTTOM = 'M0,.5 L1,.5 M.5,.5 L.5,1',
+
+  /** ┼ */ CROSS = 'M0,.5 L1,.5 M.5,0 L.5,1',
+
+  /** ╌ */ TWO_DASHES_HORIZONTAL = 'M.1,.5 L.4,.5 M.6,.5 L.9,.5', // .2 empty, .3 filled
+  /** ┄ */ THREE_DASHES_HORIZONTAL = 'M.0667,.5 L.2667,.5 M.4,.5 L.6,.5 M.7333,.5 L.9333,.5', // .1333 empty, .2 filled
+  /** ┉ */ FOUR_DASHES_HORIZONTAL = 'M.05,.5 L.2,.5 M.3,.5 L.45,.5 M.55,.5 L.7,.5 M.8,.5 L.95,.5', // .1 empty, .15 filled
+  /** ╎ */ TWO_DASHES_VERTICAL = 'M.5,.1 L.5,.4 M.5,.6 L.5,.9',
+  /** ┆ */ THREE_DASHES_VERTICAL = 'M.5,.0667 L.5,.2667 M.5,.4 L.5,.6 M.5,.7333 L.5,.9333',
+  /** ┊ */ FOUR_DASHES_VERTICAL = 'M.5,.05 L.5,.2 M.5,.3 L.5,.45 L.5,.55 M.5,.7 L.5,.95',
+}
+
+const enum Style {
+  NORMAL = 1,
+  BOLD = 3
+}
+
+/**
+ * @param xp The percentage of 15% of the x axis.
+ * @param yp The percentage of 15% of the x axis on the y axis.
+ */
+type DrawFunctionDefinition = (xp: number, yp: number) => string;
+
+/**
+ * This contains the definitions of all box drawing characters in the format of SVG paths (ie. the
+ * svg d attribute).
+ */
+export const boxDrawingDefinitions: { [character: string]: { [fontWeight: number]: string | DrawFunctionDefinition } | undefined } = {
+  // Uniform normal and bold
+  '─': { [Style.NORMAL]: Shapes.LEFT_TO_RIGHT },
+  '━': { [Style.BOLD]:   Shapes.LEFT_TO_RIGHT },
+  '│': { [Style.NORMAL]: Shapes.TOP_TO_BOTTOM },
+  '┃': { [Style.BOLD]:   Shapes.TOP_TO_BOTTOM },
+  '┌': { [Style.NORMAL]: Shapes.RIGHT_TO_BOTTOM },
+  '┏': { [Style.BOLD]:   Shapes.RIGHT_TO_BOTTOM },
+  '┐': { [Style.NORMAL]: Shapes.LEFT_TO_BOTTOM },
+  '┓': { [Style.BOLD]:   Shapes.LEFT_TO_BOTTOM },
+  '└': { [Style.NORMAL]: Shapes.TOP_TO_RIGHT },
+  '┗': { [Style.BOLD]:   Shapes.TOP_TO_RIGHT },
+  '┘': { [Style.NORMAL]: Shapes.TOP_TO_LEFT },
+  '┛': { [Style.BOLD]:   Shapes.TOP_TO_LEFT },
+  '├': { [Style.NORMAL]: Shapes.T_RIGHT },
+  '┣': { [Style.BOLD]:   Shapes.T_RIGHT },
+  '┤': { [Style.NORMAL]: Shapes.T_LEFT },
+  '┫': { [Style.BOLD]:   Shapes.T_LEFT },
+  '┬': { [Style.NORMAL]: Shapes.T_BOTTOM },
+  '┳': { [Style.BOLD]:   Shapes.T_BOTTOM },
+  '┴': { [Style.NORMAL]: Shapes.T_TOP },
+  '┻': { [Style.BOLD]:   Shapes.T_TOP },
+  '┼': { [Style.NORMAL]: Shapes.CROSS },
+  '╋': { [Style.BOLD]:   Shapes.CROSS },
+  '╴': { [Style.NORMAL]: Shapes.MIDDLE_TO_LEFT },
+  '╸': { [Style.BOLD]:   Shapes.MIDDLE_TO_LEFT },
+  '╵': { [Style.NORMAL]: Shapes.MIDDLE_TO_TOP },
+  '╹': { [Style.BOLD]:   Shapes.MIDDLE_TO_TOP },
+  '╶': { [Style.NORMAL]: Shapes.MIDDLE_TO_RIGHT },
+  '╺': { [Style.BOLD]:   Shapes.MIDDLE_TO_RIGHT },
+  '╷': { [Style.NORMAL]: Shapes.MIDDLE_TO_BOTTOM },
+  '╻': { [Style.BOLD]:   Shapes.MIDDLE_TO_BOTTOM },
+
+  // Double border
+  '═': { [Style.NORMAL]: (xp, yp) => `M0,${.5 - yp} L1,${.5 - yp} M0,${.5 + yp} L1,${.5 + yp}` },
+  '║': { [Style.NORMAL]: (xp, yp) => `M${.5 - xp},0 L${.5 - xp},1 M${.5 + xp},0 L${.5 + xp},1` },
+  '╒': { [Style.NORMAL]: (xp, yp) => `M.5,1 L.5,${.5 - yp} L1,${.5 - yp} M.5,${.5 + yp} L1,${.5 + yp}` },
+  '╓': { [Style.NORMAL]: (xp, yp) => `M${.5 - xp},1 L${.5 - xp},.5 L1,.5 M${.5 + xp},.5 L${.5 + xp},1` },
+  '╔': { [Style.NORMAL]: (xp, yp) => `M1,${.5 - yp} L${.5 - xp},${.5 - yp} L${.5 - xp},1 M1,${.5 + yp} L${.5 + xp},${.5 + yp} L${.5 + xp},1` },
+  '╕': { [Style.NORMAL]: (xp, yp) => `M0,${.5 - yp} L.5,${.5 - yp} L.5,1 M0,${.5 + yp} L.5,${.5 + yp}` },
+  '╖': { [Style.NORMAL]: (xp, yp) => `M${.5 + xp},1 L${.5 + xp},.5 L0,.5 M${.5 - xp},.5 L${.5 - xp},1` },
+  '╗': { [Style.NORMAL]: (xp, yp) => `M0,${.5 + yp} L${.5 - xp},${.5 + yp} L${.5 - xp},1 M0,${.5 - yp} L${.5 + xp},${.5 - yp} L${.5 + xp},1` },
+  '╘': { [Style.NORMAL]: (xp, yp) => `M.5,0 L.5,${.5 + yp} L1,${.5 + yp} M.5,${.5 - yp} L1,${.5 - yp}` },
+  '╙': { [Style.NORMAL]: (xp, yp) => `M1,.5 L${.5 - xp},.5 L${.5 - xp},0 M${.5 + xp},.5 L${.5 + xp},0` },
+  '╚': { [Style.NORMAL]: (xp, yp) => `M1,${.5 - yp} L${.5 + xp},${.5 - yp} L${.5 + xp},0 M1,${.5 + yp} L${.5 - xp},${.5 + yp} L${.5 - xp},0` },
+  '╛': { [Style.NORMAL]: (xp, yp) => `M0,${.5 + yp} L.5,${.5 + yp} L.5,0 M0,${.5 - yp} L.5,${.5 - yp}` },
+  '╜': { [Style.NORMAL]: (xp, yp) => `M0,.5 L${.5 + xp},.5 L${.5 + xp},0 M${.5 - xp},.5 L${.5 - xp},0` },
+  '╝': { [Style.NORMAL]: (xp, yp) => `M0,${.5 - yp} L${.5 - xp},${.5 - yp} L${.5 - xp},0 M0,${.5 + yp} L${.5 + xp},${.5 + yp} L${.5 + xp},0` },
+  '╞': { [Style.NORMAL]: (xp, yp) => `${Shapes.TOP_TO_BOTTOM} M.5,${.5 - yp} L1,${.5 - yp} M.5,${.5 + yp} L1,${.5 + yp}` },
+  '╟': { [Style.NORMAL]: (xp, yp) => `M${.5 - xp},0 L${.5 - xp},1 M${.5 + xp},0 L${.5 + xp},1 M${.5 + xp},.5 L1,.5` },
+  '╠': { [Style.NORMAL]: (xp, yp) => `M${.5 - xp},0 L${.5 - xp},1 M1,${.5 + yp} L${.5 + xp},${.5 + yp} L${.5 + xp},1 M1,${.5 - yp} L${.5 + xp},${.5 - yp} L${.5 + xp},0` },
+  '╡': { [Style.NORMAL]: (xp, yp) => `${Shapes.TOP_TO_BOTTOM} M0,${.5 - yp} L.5,${.5 - yp} M0,${.5 + yp} L.5,${.5 + yp}` },
+  '╢': { [Style.NORMAL]: (xp, yp) => `M0,.5 L${.5 - xp},.5 M${.5 - xp},0 L${.5 - xp},1 M${.5 + xp},0 L${.5 + xp},1` },
+  '╣': { [Style.NORMAL]: (xp, yp) => `M${.5 + xp},0 L${.5 + xp},1 M0,${.5 + yp} L${.5 - xp},${.5 + yp} L${.5 - xp},1 M0,${.5 - yp} L${.5 - xp},${.5 - yp} L${.5 - xp},0` },
+  '╤': { [Style.NORMAL]: (xp, yp) => `M0,${.5 - yp} L1,${.5 - yp} M0,${.5 + yp} L1,${.5 + yp} M.5,${.5 + yp} L.5,1` },
+  '╥': { [Style.NORMAL]: (xp, yp) => `${Shapes.LEFT_TO_RIGHT} M${.5 - xp},.5 L${.5 - xp},1 M${.5 + xp},.5 L${.5 + xp},1` },
+  '╦': { [Style.NORMAL]: (xp, yp) => `M0,${.5 - yp} L1,${.5 - yp} M0,${.5 + yp} L${.5 - xp},${.5 + yp} L${.5 - xp},1 M1,${.5 + yp} L${.5 + xp},${.5 + yp} L${.5 + xp},1` },
+  '╧': { [Style.NORMAL]: (xp, yp) => `M.5,0 L.5,${.5 - yp} M0,${.5 - yp} L1,${.5 - yp} M0,${.5 + yp} L1,${.5 + yp}` },
+  '╨': { [Style.NORMAL]: (xp, yp) => `${Shapes.LEFT_TO_RIGHT} M${.5 - xp},.5 L${.5 - xp},0 M${.5 + xp},.5 L${.5 + xp},0` },
+  '╩': { [Style.NORMAL]: (xp, yp) => `M0,${.5 + yp} L1,${.5 + yp} M0,${.5 - yp} L${.5 - xp},${.5 - yp} L${.5 - xp},0 M1,${.5 - yp} L${.5 + xp},${.5 - yp} L${.5 + xp},0` },
+  '╪': { [Style.NORMAL]: (xp, yp) => `${Shapes.TOP_TO_BOTTOM} M0,${.5 - yp} L1,${.5 - yp} M0,${.5 + yp} L1,${.5 + yp}` },
+  '╫': { [Style.NORMAL]: (xp, yp) => `${Shapes.LEFT_TO_RIGHT} M${.5 - xp},0 L${.5 - xp},1 M${.5 + xp},0 L${.5 + xp},1` },
+  '╬': { [Style.NORMAL]: (xp, yp) => `M0,${.5 + yp} L${.5 - xp},${.5 + yp} L${.5 - xp},1 M1,${.5 + yp} L${.5 + xp},${.5 + yp} L${.5 + xp},1 M0,${.5 - yp} L${.5 - xp},${.5 - yp} L${.5 - xp},0 M1,${.5 - yp} L${.5 + xp},${.5 - yp} L${.5 + xp},0` },
+
+  // Diagonal
+  '╱': { [Style.NORMAL]: 'M1,0 L0,1' },
+  '╲': { [Style.NORMAL]: 'M0,0 L1,1' },
+  '╳': { [Style.NORMAL]: 'M1,0 L0,1 M0,0 L1,1' },
+
+  // Mixed weight
+  '╼': { [Style.NORMAL]: Shapes.MIDDLE_TO_LEFT,                                [Style.BOLD]: Shapes.MIDDLE_TO_RIGHT },
+  '╽': { [Style.NORMAL]: Shapes.MIDDLE_TO_TOP,                                 [Style.BOLD]: Shapes.MIDDLE_TO_BOTTOM },
+  '╾': { [Style.NORMAL]: Shapes.MIDDLE_TO_RIGHT,                               [Style.BOLD]: Shapes.MIDDLE_TO_LEFT },
+  '╿': { [Style.NORMAL]: Shapes.MIDDLE_TO_BOTTOM,                              [Style.BOLD]: Shapes.MIDDLE_TO_TOP },
+  '┍': { [Style.NORMAL]: Shapes.MIDDLE_TO_BOTTOM,                              [Style.BOLD]: Shapes.MIDDLE_TO_RIGHT },
+  '┎': { [Style.NORMAL]: Shapes.MIDDLE_TO_RIGHT,                               [Style.BOLD]: Shapes.MIDDLE_TO_BOTTOM },
+  '┑': { [Style.NORMAL]: Shapes.MIDDLE_TO_BOTTOM,                              [Style.BOLD]: Shapes.MIDDLE_TO_LEFT },
+  '┒': { [Style.NORMAL]: Shapes.MIDDLE_TO_LEFT,                                [Style.BOLD]: Shapes.MIDDLE_TO_BOTTOM },
+  '┕': { [Style.NORMAL]: Shapes.MIDDLE_TO_TOP,                                 [Style.BOLD]: Shapes.MIDDLE_TO_RIGHT },
+  '┖': { [Style.NORMAL]: Shapes.MIDDLE_TO_RIGHT,                               [Style.BOLD]: Shapes.MIDDLE_TO_TOP },
+  '┙': { [Style.NORMAL]: Shapes.MIDDLE_TO_TOP,                                 [Style.BOLD]: Shapes.MIDDLE_TO_LEFT },
+  '┚': { [Style.NORMAL]: Shapes.MIDDLE_TO_LEFT,                                [Style.BOLD]: Shapes.MIDDLE_TO_TOP },
+  '┝': { [Style.NORMAL]: Shapes.TOP_TO_BOTTOM,                                 [Style.BOLD]: Shapes.MIDDLE_TO_RIGHT },
+  '┞': { [Style.NORMAL]: Shapes.RIGHT_TO_BOTTOM,                               [Style.BOLD]: Shapes.MIDDLE_TO_TOP },
+  '┟': { [Style.NORMAL]: Shapes.TOP_TO_RIGHT,                                  [Style.BOLD]: Shapes.MIDDLE_TO_BOTTOM },
+  '┠': { [Style.NORMAL]: Shapes.MIDDLE_TO_RIGHT,                               [Style.BOLD]: Shapes.TOP_TO_BOTTOM },
+  '┡': { [Style.NORMAL]: Shapes.MIDDLE_TO_BOTTOM,                              [Style.BOLD]: Shapes.TOP_TO_RIGHT },
+  '┢': { [Style.NORMAL]: Shapes.MIDDLE_TO_TOP,                                 [Style.BOLD]: Shapes.RIGHT_TO_BOTTOM },
+  '┥': { [Style.NORMAL]: Shapes.TOP_TO_BOTTOM,                                 [Style.BOLD]: Shapes.MIDDLE_TO_LEFT },
+  '┦': { [Style.NORMAL]: Shapes.LEFT_TO_BOTTOM,                                [Style.BOLD]: Shapes.MIDDLE_TO_TOP },
+  '┧': { [Style.NORMAL]: Shapes.TOP_TO_LEFT,                                   [Style.BOLD]: Shapes.MIDDLE_TO_BOTTOM },
+  '┨': { [Style.NORMAL]: Shapes.MIDDLE_TO_LEFT,                                [Style.BOLD]: Shapes.TOP_TO_BOTTOM },
+  '┩': { [Style.NORMAL]: Shapes.MIDDLE_TO_BOTTOM,                              [Style.BOLD]: Shapes.TOP_TO_LEFT },
+  '┪': { [Style.NORMAL]: Shapes.MIDDLE_TO_TOP,                                 [Style.BOLD]: Shapes.LEFT_TO_BOTTOM },
+  '┭': { [Style.NORMAL]: Shapes.RIGHT_TO_BOTTOM,                               [Style.BOLD]: Shapes.MIDDLE_TO_LEFT },
+  '┮': { [Style.NORMAL]: Shapes.LEFT_TO_BOTTOM,                                [Style.BOLD]: Shapes.MIDDLE_TO_RIGHT },
+  '┯': { [Style.NORMAL]: Shapes.MIDDLE_TO_BOTTOM,                              [Style.BOLD]: Shapes.LEFT_TO_RIGHT },
+  '┰': { [Style.NORMAL]: Shapes.LEFT_TO_RIGHT,                                 [Style.BOLD]: Shapes.MIDDLE_TO_BOTTOM },
+  '┱': { [Style.NORMAL]: Shapes.MIDDLE_TO_RIGHT,                               [Style.BOLD]: Shapes.LEFT_TO_BOTTOM },
+  '┲': { [Style.NORMAL]: Shapes.MIDDLE_TO_LEFT,                                [Style.BOLD]: Shapes.RIGHT_TO_BOTTOM },
+  '┵': { [Style.NORMAL]: Shapes.TOP_TO_RIGHT,                                  [Style.BOLD]: Shapes.MIDDLE_TO_LEFT },
+  '┶': { [Style.NORMAL]: Shapes.TOP_TO_LEFT,                                   [Style.BOLD]: Shapes.MIDDLE_TO_RIGHT },
+  '┷': { [Style.NORMAL]: Shapes.MIDDLE_TO_TOP,                                 [Style.BOLD]: Shapes.LEFT_TO_RIGHT },
+  '┸': { [Style.NORMAL]: Shapes.LEFT_TO_RIGHT,                                 [Style.BOLD]: Shapes.MIDDLE_TO_TOP },
+  '┹': { [Style.NORMAL]: Shapes.MIDDLE_TO_RIGHT,                               [Style.BOLD]: Shapes.TOP_TO_LEFT },
+  '┺': { [Style.NORMAL]: Shapes.MIDDLE_TO_LEFT,                                [Style.BOLD]: Shapes.TOP_TO_RIGHT },
+  '┽': { [Style.NORMAL]: `${Shapes.TOP_TO_BOTTOM} ${Shapes.MIDDLE_TO_RIGHT}`,  [Style.BOLD]: Shapes.MIDDLE_TO_LEFT },
+  '┾': { [Style.NORMAL]: `${Shapes.TOP_TO_BOTTOM} ${Shapes.MIDDLE_TO_LEFT}`,   [Style.BOLD]: Shapes.MIDDLE_TO_RIGHT },
+  '┿': { [Style.NORMAL]: Shapes.TOP_TO_BOTTOM,                                 [Style.BOLD]: Shapes.LEFT_TO_RIGHT },
+  '╀': { [Style.NORMAL]: `${Shapes.LEFT_TO_RIGHT} ${Shapes.MIDDLE_TO_BOTTOM}`, [Style.BOLD]: Shapes.MIDDLE_TO_TOP },
+  '╁': { [Style.NORMAL]: `${Shapes.MIDDLE_TO_TOP} ${Shapes.LEFT_TO_RIGHT}`,    [Style.BOLD]: Shapes.MIDDLE_TO_BOTTOM },
+  '╂': { [Style.NORMAL]: Shapes.LEFT_TO_RIGHT,                                 [Style.BOLD]: Shapes.TOP_TO_BOTTOM },
+  '╃': { [Style.NORMAL]: Shapes.RIGHT_TO_BOTTOM,                               [Style.BOLD]: Shapes.TOP_TO_LEFT },
+  '╄': { [Style.NORMAL]: Shapes.LEFT_TO_BOTTOM,                                [Style.BOLD]: Shapes.TOP_TO_RIGHT },
+  '╅': { [Style.NORMAL]: Shapes.TOP_TO_RIGHT,                                  [Style.BOLD]: Shapes.LEFT_TO_BOTTOM },
+  '╆': { [Style.NORMAL]: Shapes.TOP_TO_LEFT,                                   [Style.BOLD]: Shapes.RIGHT_TO_BOTTOM },
+  '╇': { [Style.NORMAL]: Shapes.MIDDLE_TO_BOTTOM,                              [Style.BOLD]: `${Shapes.MIDDLE_TO_TOP} ${Shapes.LEFT_TO_RIGHT}` },
+  '╈': { [Style.NORMAL]: Shapes.MIDDLE_TO_TOP,                                 [Style.BOLD]: `${Shapes.LEFT_TO_RIGHT} ${Shapes.MIDDLE_TO_BOTTOM}` },
+  '╉': { [Style.NORMAL]: Shapes.MIDDLE_TO_RIGHT,                               [Style.BOLD]: `${Shapes.TOP_TO_BOTTOM} ${Shapes.MIDDLE_TO_LEFT}` },
+  '╊': { [Style.NORMAL]: Shapes.MIDDLE_TO_LEFT,                                [Style.BOLD]: `${Shapes.TOP_TO_BOTTOM} ${Shapes.MIDDLE_TO_RIGHT}` },
+
+  // Dashed
+  '╌': { [Style.NORMAL]: Shapes.TWO_DASHES_HORIZONTAL },
+  '╍': { [Style.BOLD]:   Shapes.TWO_DASHES_HORIZONTAL },
+  '┄': { [Style.NORMAL]: Shapes.THREE_DASHES_HORIZONTAL },
+  '┅': { [Style.BOLD]:   Shapes.THREE_DASHES_HORIZONTAL },
+  '┈': { [Style.NORMAL]: Shapes.FOUR_DASHES_HORIZONTAL },
+  '┉': { [Style.BOLD]:   Shapes.FOUR_DASHES_HORIZONTAL },
+  '╎': { [Style.NORMAL]: Shapes.TWO_DASHES_VERTICAL },
+  '╏': { [Style.BOLD]:   Shapes.TWO_DASHES_VERTICAL },
+  '┆': { [Style.NORMAL]: Shapes.THREE_DASHES_VERTICAL  },
+  '┇': { [Style.BOLD]:   Shapes.THREE_DASHES_VERTICAL },
+  '┊': { [Style.NORMAL]: Shapes.FOUR_DASHES_VERTICAL },
+  '┋': { [Style.BOLD]:   Shapes.FOUR_DASHES_VERTICAL },
+
+  // Curved
+  '╭': { [Style.NORMAL]: (xp, yp) => `M.5,1 L.5,${.5 + (yp / .15 * .5)} C.5,${.5 + (yp / .15 * .5)},.5,.5,1,.5` },
+  '╮': { [Style.NORMAL]: (xp, yp) => `M.5,1 L.5,${.5 + (yp / .15 * .5)} C.5,${.5 + (yp / .15 * .5)},.5,.5,0,.5` },
+  '╯': { [Style.NORMAL]: (xp, yp) => `M.5,0 L.5,${.5 - (yp / .15 * .5)} C.5,${.5 - (yp / .15 * .5)},.5,.5,0,.5` },
+  '╰': { [Style.NORMAL]: (xp, yp) => `M.5,0 L.5,${.5 - (yp / .15 * .5)} C.5,${.5 - (yp / .15 * .5)},.5,.5,1,.5` }
+};
+
+interface IVectorShape {
+  d: string;
+  type: VectorType;
+  /** Padding to apply to the vector's x axis in CSS pixels. */
+  horizontalPadding?: number;
+}
+
+const enum VectorType {
+  FILL,
+  STROKE
+}
+
+/**
+ * This contains the definitions of the primarily used box drawing characters as vector shapes. The
+ * reason these characters are defined specially is to avoid common problems if a user's font has
+ * not been patched with powerline characters and also to get pixel perfect rendering as rendering
+ * issues can occur around AA/SPAA.
+ *
+ * Original symbols defined in https://github.com/powerline/fontpatcher
+ */
+export const powerlineDefinitions: { [index: string]: IVectorShape } = {
+  // Right triangle solid
+  '\u{E0B0}': { d: 'M0,0 L1,.5 L0,1', type: VectorType.FILL },
+  // Right triangle line
+  '\u{E0B1}': { d: 'M0,0 L1,.5 L0,1', type: VectorType.STROKE, horizontalPadding: 0.5 },
+  // Left triangle solid
+  '\u{E0B2}': { d: 'M1,0 L0,.5 L1,1', type: VectorType.FILL },
+  // Left triangle line
+  '\u{E0B3}': { d: 'M1,0 L0,.5 L1,1', type: VectorType.STROKE, horizontalPadding: 0.5 },
+  // Right semi-circle solid,
+  '\u{E0B4}': { d: 'M0,0 L0,1 C0.552,1,1,0.776,1,.5 C1,0.224,0.552,0,0,0', type: VectorType.FILL },
+  // Right semi-circle line,
+  '\u{E0B5}': { d: 'M0,1 C0.552,1,1,0.776,1,.5 C1,0.224,0.552,0,0,0', type: VectorType.STROKE },
+  // Left semi-circle solid,
+  '\u{E0B6}': { d: 'M1,0 L1,1 C0.448,1,0,0.776,0,.5 C0,0.224,0.448,0,1,0', type: VectorType.FILL },
+  // Left semi-circle line,
+  '\u{E0B7}': { d: 'M1,1 C0.448,1,0,0.776,0,.5 C0,0.224,0.448,0,1,0', type: VectorType.STROKE }
+};
+
+/**
+ * Try drawing a custom block element or box drawing character, returning whether it was
+ * successfully drawn.
+ */
+export function tryDrawCustomChar(
+  ctx: CanvasRenderingContext2D,
+  c: string,
+  xOffset: number,
+  yOffset: number,
+  scaledCellWidth: number,
+  scaledCellHeight: number
+): boolean {
+  const blockElementDefinition = blockElementDefinitions[c];
+  if (blockElementDefinition) {
+    drawBlockElementChar(ctx, blockElementDefinition, xOffset, yOffset, scaledCellWidth, scaledCellHeight);
+    return true;
+  }
+
+  const patternDefinition = patternCharacterDefinitions[c];
+  if (patternDefinition) {
+    drawPatternChar(ctx, patternDefinition, xOffset, yOffset, scaledCellWidth, scaledCellHeight);
+    return true;
+  }
+
+  const boxDrawingDefinition = boxDrawingDefinitions[c];
+  if (boxDrawingDefinition) {
+    drawBoxDrawingChar(ctx, boxDrawingDefinition, xOffset, yOffset, scaledCellWidth, scaledCellHeight);
+    return true;
+  }
+
+  const powerlineDefinition = powerlineDefinitions[c];
+  if (powerlineDefinition) {
+    drawPowerlineChar(ctx, powerlineDefinition, xOffset, yOffset, scaledCellWidth, scaledCellHeight);
+    return true;
+  }
+
+  return false;
+}
+
+function drawBlockElementChar(
+  ctx: CanvasRenderingContext2D,
+  charDefinition: IBlockVector[],
+  xOffset: number,
+  yOffset: number,
+  scaledCellWidth: number,
+  scaledCellHeight: number
+): void {
+  for (let i = 0; i < charDefinition.length; i++) {
+    const box = charDefinition[i];
+    const xEighth = scaledCellWidth / 8;
+    const yEighth = scaledCellHeight / 8;
+    ctx.fillRect(
+      xOffset + box.x * xEighth,
+      yOffset + box.y * yEighth,
+      box.w * xEighth,
+      box.h * yEighth
+    );
+  }
+}
+
+const cachedPatterns: Map<PatternDefinition, Map</* fillStyle */string, CanvasPattern>> = new Map();
+
+function drawPatternChar(
+  ctx: CanvasRenderingContext2D,
+  charDefinition: number[][],
+  xOffset: number,
+  yOffset: number,
+  scaledCellWidth: number,
+  scaledCellHeight: number
+): void {
+  let patternSet = cachedPatterns.get(charDefinition);
+  if (!patternSet) {
+    patternSet = new Map();
+    cachedPatterns.set(charDefinition, patternSet);
+  }
+  const fillStyle = ctx.fillStyle;
+  if (typeof fillStyle !== 'string') {
+    throw new Error(`Unexpected fillStyle type "${fillStyle}"`);
+  }
+  let pattern = patternSet.get(fillStyle);
+  if (!pattern) {
+    const width = charDefinition[0].length;
+    const height = charDefinition.length;
+    const tmpCanvas = document.createElement('canvas');
+    tmpCanvas.width = width;
+    tmpCanvas.height = height;
+    const tmpCtx = throwIfFalsy(tmpCanvas.getContext('2d'));
+    const imageData = new ImageData(width, height);
+
+    // Extract rgba from fillStyle
+    let r: number;
+    let g: number;
+    let b: number;
+    let a: number;
+    if (fillStyle.startsWith('#')) {
+      r = parseInt(fillStyle.slice(1, 3), 16);
+      g = parseInt(fillStyle.slice(3, 5), 16);
+      b = parseInt(fillStyle.slice(5, 7), 16);
+      a = fillStyle.length > 7 && parseInt(fillStyle.slice(7, 9), 16) || 1;
+    } else if (fillStyle.startsWith('rgba')) {
+      ([r, g, b, a] = fillStyle.substring(5, fillStyle.length - 1).split(',').map(e => parseFloat(e)));
+    } else {
+      throw new Error(`Unexpected fillStyle color format "${fillStyle}" when drawing pattern glyph`);
+    }
+
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        imageData.data[(y * width + x) * 4    ] = r;
+        imageData.data[(y * width + x) * 4 + 1] = g;
+        imageData.data[(y * width + x) * 4 + 2] = b;
+        imageData.data[(y * width + x) * 4 + 3] = charDefinition[y][x] * (a * 255);
+      }
+    }
+    tmpCtx.putImageData(imageData, 0, 0);
+    pattern = throwIfFalsy(ctx.createPattern(tmpCanvas, null));
+    patternSet.set(fillStyle, pattern);
+  }
+  ctx.fillStyle = pattern;
+  ctx.fillRect(xOffset, yOffset, scaledCellWidth, scaledCellHeight);
+}
+
+/**
+ * Draws the following box drawing characters by mapping a subset of SVG d attribute instructions to
+ * canvas draw calls.
+ *
+ * Box styles:       ┎┰┒┍┯┑╓╥╖╒╤╕ ┏┳┓┌┲┓┌┬┐┏┱┐
+ * ┌─┬─┐ ┏━┳━┓ ╔═╦═╗ ┠╂┨┝┿┥╟╫╢╞╪╡ ┡╇┩├╊┫┢╈┪┣╉┤
+ * │ │ │ ┃ ┃ ┃ ║ ║ ║ ┖┸┚┕┷┙╙╨╜╘╧╛ └┴┘└┺┛┗┻┛┗┹┘
+ * ├─┼─┤ ┣━╋━┫ ╠═╬═╣ ┏┱┐┌┲┓┌┬┐┌┬┐ ┏┳┓┌┮┓┌┬┐┏┭┐
+ * │ │ │ ┃ ┃ ┃ ║ ║ ║ ┡╃┤├╄┩├╆┪┢╅┤ ┞╀┦├┾┫┟╁┧┣┽┤
+ * └─┴─┘ ┗━┻━┛ ╚═╩═╝ └┴┘└┴┘└┺┛┗┹┘ └┴┘└┶┛┗┻┛┗┵┘
+ *
+ * Other:
+ * ╭─╮ ╲ ╱ ╷╻╎╏┆┇┊┋ ╺╾╴ ╌╌╌ ┄┄┄ ┈┈┈
+ * │ │  ╳  ╽╿╎╏┆┇┊┋ ╶╼╸ ╍╍╍ ┅┅┅ ┉┉┉
+ * ╰─╯ ╱ ╲ ╹╵╎╏┆┇┊┋
+ *
+ * All box drawing characters:
+ * ─ ━ │ ┃ ┄ ┅ ┆ ┇ ┈ ┉ ┊ ┋ ┌ ┍ ┎ ┏
+ * ┐ ┑ ┒ ┓ └ ┕ ┖ ┗ ┘ ┙ ┚ ┛ ├ ┝ ┞ ┟
+ * ┠ ┡ ┢ ┣ ┤ ┥ ┦ ┧ ┨ ┩ ┪ ┫ ┬ ┭ ┮ ┯
+ * ┰ ┱ ┲ ┳ ┴ ┵ ┶ ┷ ┸ ┹ ┺ ┻ ┼ ┽ ┾ ┿
+ * ╀ ╁ ╂ ╃ ╄ ╅ ╆ ╇ ╈ ╉ ╊ ╋ ╌ ╍ ╎ ╏
+ * ═ ║ ╒ ╓ ╔ ╕ ╖ ╗ ╘ ╙ ╚ ╛ ╜ ╝ ╞ ╟
+ * ╠ ╡ ╢ ╣ ╤ ╥ ╦ ╧ ╨ ╩ ╪ ╫ ╬ ╭ ╮ ╯
+ * ╰ ╱ ╲ ╳ ╴ ╵ ╶ ╷ ╸ ╹ ╺ ╻ ╼ ╽ ╾ ╿
+ *
+ * ---
+ *
+ * Box drawing alignment tests:                                          █
+ *                                                                       ▉
+ *   ╔══╦══╗  ┌──┬──┐  ╭──┬──╮  ╭──┬──╮  ┏━━┳━━┓  ┎┒┏┑   ╷  ╻ ┏┯┓ ┌┰┐    ▊ ╱╲╱╲╳╳╳
+ *   ║┌─╨─┐║  │╔═╧═╗│  │╒═╪═╕│  │╓─╁─╖│  ┃┌─╂─┐┃  ┗╃╄┙  ╶┼╴╺╋╸┠┼┨ ┝╋┥    ▋ ╲╱╲╱╳╳╳
+ *   ║│╲ ╱│║  │║   ║│  ││ │ ││  │║ ┃ ║│  ┃│ ╿ │┃  ┍╅╆┓   ╵  ╹ ┗┷┛ └┸┘    ▌ ╱╲╱╲╳╳╳
+ *   ╠╡ ╳ ╞╣  ├╢   ╟┤  ├┼─┼─┼┤  ├╫─╂─╫┤  ┣┿╾┼╼┿┫  ┕┛┖┚     ┌┄┄┐ ╎ ┏┅┅┓ ┋ ▍ ╲╱╲╱╳╳╳
+ *   ║│╱ ╲│║  │║   ║│  ││ │ ││  │║ ┃ ║│  ┃│ ╽ │┃  ░░▒▒▓▓██ ┊  ┆ ╎ ╏  ┇ ┋ ▎
+ *   ║└─╥─┘║  │╚═╤═╝│  │╘═╪═╛│  │╙─╀─╜│  ┃└─╂─┘┃  ░░▒▒▓▓██ ┊  ┆ ╎ ╏  ┇ ┋ ▏
+ *   ╚══╩══╝  └──┴──┘  ╰──┴──╯  ╰──┴──╯  ┗━━┻━━┛           └╌╌┘ ╎ ┗╍╍┛ ┋  ▁▂▃▄▅▆▇█
+ *
+ * Source: https://www.w3.org/2001/06/utf-8-test/UTF-8-demo.html
+ */
+function drawBoxDrawingChar(
+  ctx: CanvasRenderingContext2D,
+  charDefinition: { [fontWeight: number]: string | ((xp: number, yp: number) => string) },
+  xOffset: number,
+  yOffset: number,
+  scaledCellWidth: number,
+  scaledCellHeight: number
+): void {
+  ctx.strokeStyle = ctx.fillStyle;
+  for (const [fontWeight, instructions] of Object.entries(charDefinition)) {
+    ctx.beginPath();
+    ctx.lineWidth = window.devicePixelRatio * Number.parseInt(fontWeight);
+    let actualInstructions: string;
+    if (typeof instructions === 'function') {
+      const xp = .15;
+      const yp = .15 / scaledCellHeight * scaledCellWidth;
+      actualInstructions = instructions(xp, yp);
+    } else {
+      actualInstructions = instructions;
+    }
+    for (const instruction of actualInstructions.split(' ')) {
+      const type = instruction[0];
+      const f = svgToCanvasInstructionMap[type];
+      if (!f) {
+        console.error(`Could not find drawing instructions for "${type}"`);
+        continue;
+      }
+      const args: string[] = instruction.substring(1).split(',');
+      if (!args[0] || !args[1]) {
+        continue;
+      }
+      f(ctx, translateArgs(args, scaledCellWidth, scaledCellHeight, xOffset, yOffset));
+    }
+    ctx.stroke();
+    ctx.closePath();
+  }
+}
+
+function drawPowerlineChar(
+  ctx: CanvasRenderingContext2D,
+  charDefinition: IVectorShape,
+  xOffset: number,
+  yOffset: number,
+  scaledCellWidth: number,
+  scaledCellHeight: number
+): void {
+  ctx.beginPath();
+  ctx.lineWidth = window.devicePixelRatio;
+  for (const instruction of charDefinition.d.split(' ')) {
+    const type = instruction[0];
+    const f = svgToCanvasInstructionMap[type];
+    if (!f) {
+      console.error(`Could not find drawing instructions for "${type}"`);
+      continue;
+    }
+    const args: string[] = instruction.substring(1).split(',');
+    if (!args[0] || !args[1]) {
+      continue;
+    }
+    f(ctx, translateArgs(args, scaledCellWidth, scaledCellHeight, xOffset, yOffset, charDefinition.horizontalPadding));
+  }
+  if (charDefinition.type === VectorType.STROKE) {
+    ctx.strokeStyle = ctx.fillStyle;
+    ctx.stroke();
+  } else {
+    ctx.fill();
+  }
+  ctx.closePath();
+}
+
+function clamp(value: number, max: number, min: number = 0): number {
+  return Math.max(Math.min(value, max), min);
+}
+
+const svgToCanvasInstructionMap: { [index: string]: any } = {
+  'C': (ctx: CanvasRenderingContext2D, args: number[]) => ctx.bezierCurveTo(args[0], args[1], args[2], args[3], args[4], args[5]),
+  'L': (ctx: CanvasRenderingContext2D, args: number[]) => ctx.lineTo(args[0], args[1]),
+  'M': (ctx: CanvasRenderingContext2D, args: number[]) => ctx.moveTo(args[0], args[1])
+};
+
+function translateArgs(args: string[], cellWidth: number, cellHeight: number, xOffset: number, yOffset: number, horizontalPadding: number = 0): number[] {
+  const result = args.map(e => parseFloat(e) || parseInt(e));
+
+  if (result.length < 2) {
+    throw new Error('Too few arguments for instruction');
+  }
+
+  for (let x = 0; x < result.length; x += 2) {
+    // Translate from 0-1 to 0-cellWidth
+    result[x] *= cellWidth - (horizontalPadding * 2 * window.devicePixelRatio);
+    // Ensure coordinate doesn't escape cell bounds and round to the nearest 0.5 to ensure a crisp
+    // line at 100% devicePixelRatio
+    if (result[x] !== 0) {
+      result[x] = clamp(Math.round(result[x] + 0.5) - 0.5, cellWidth, 0);
+    }
+    // Apply the cell's offset (ie. x*cellWidth)
+    result[x] += xOffset + (horizontalPadding * window.devicePixelRatio);
+  }
+
+  for (let y = 1; y < result.length; y += 2) {
+    // Translate from 0-1 to 0-cellHeight
+    result[y] *= cellHeight;
+    // Ensure coordinate doesn't escape cell bounds and round to the nearest 0.5 to ensure a crisp
+    // line at 100% devicePixelRatio
+    if (result[y] !== 0) {
+      result[y] = clamp(Math.round(result[y] + 0.5) - 0.5, cellHeight, 0);
+    }
+    // Apply the cell's offset (ie. x*cellHeight)
+    result[y] += yOffset;
+  }
+
+  return result;
+}
diff --git a/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts b/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts
index 05751c42..b3b9b973 100644
--- a/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts
+++ b/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts
@@ -4,15 +4,15 @@
  */
 
 import { ICharAtlasConfig } from './Types';
-import { DIM_OPACITY, TEXT_BASELINE } from 'browser/renderer/atlas/Constants';
+import { DIM_OPACITY, TEXT_BASELINE } from 'browser/renderer/Constants';
 import { IRasterizedGlyph, IBoundingBox, IRasterizedGlyphSet } from '../Types';
 import { DEFAULT_COLOR, Attributes } from 'common/buffer/Constants';
 import { throwIfFalsy } from '../WebglUtils';
 import { IColor } from 'common/Types';
 import { IDisposable } from 'xterm';
 import { AttributeData } from 'common/buffer/AttributeData';
-import { channels, color, rgba } from 'common/Color';
-import { tryDrawCustomChar } from 'browser/renderer/CustomGlyphs';
+import { color, rgba } from 'common/Color';
+import { tryDrawCustomChar } from '../CustomGlyphs';
 import { excludeFromContrastRatioDemands, isPowerlineGlyph } from 'browser/renderer/RendererUtils';
 
 // For debugging purposes, it can be useful to set this to a really tiny value,
diff --git a/addons/xterm-addon-webgl/src/renderLayer/BaseRenderLayer.ts b/addons/xterm-addon-webgl/src/renderLayer/BaseRenderLayer.ts
index 0a5a0065..0aa2049c 100644
--- a/addons/xterm-addon-webgl/src/renderLayer/BaseRenderLayer.ts
+++ b/addons/xterm-addon-webgl/src/renderLayer/BaseRenderLayer.ts
@@ -7,7 +7,7 @@ import { IRenderLayer } from './Types';
 import { acquireCharAtlas } from '../atlas/CharAtlasCache';
 import { Terminal } from 'xterm';
 import { IColorSet } from 'browser/Types';
-import { TEXT_BASELINE } from 'browser/renderer/atlas/Constants';
+import { TEXT_BASELINE } from 'browser/renderer/Constants';
 import { IRenderDimensions } from 'browser/renderer/Types';
 import { CellData } from 'common/buffer/CellData';
 import { WebglCharAtlas } from 'atlas/WebglCharAtlas';
diff --git a/addons/xterm-addon-webgl/src/renderLayer/LinkRenderLayer.ts b/addons/xterm-addon-webgl/src/renderLayer/LinkRenderLayer.ts
index b2d004f9..440dbe7b 100644
--- a/addons/xterm-addon-webgl/src/renderLayer/LinkRenderLayer.ts
+++ b/addons/xterm-addon-webgl/src/renderLayer/LinkRenderLayer.ts
@@ -5,7 +5,7 @@
 
 import { Terminal } from 'xterm';
 import { BaseRenderLayer } from './BaseRenderLayer';
-import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/atlas/Constants';
+import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/Constants';
 import { is256Color } from '../atlas/CharAtlasUtils';
 import { ITerminal, IColorSet, ILinkifierEvent } from 'browser/Types';
 import { IRenderDimensions } from 'browser/renderer/Types';
diff --git a/addons/xterm-addon-webgl/src/tsconfig.json b/addons/xterm-addon-webgl/src/tsconfig.json
index b0c9f6be..b111ae55 100644
--- a/addons/xterm-addon-webgl/src/tsconfig.json
+++ b/addons/xterm-addon-webgl/src/tsconfig.json
@@ -5,6 +5,8 @@
     "lib": [
       "dom",
       "es6",
+      "es2016.Array.Include",
+      "ES2017.Object"
     ],
     "rootDir": ".",
     "outDir": "../out",
diff --git a/demo/client.ts b/demo/client.ts
index d3b5af9c..e00279d7 100644
--- a/demo/client.ts
+++ b/demo/client.ts
@@ -10,6 +10,7 @@
 // Use tsc version (yarn watch)
 import { Terminal } from '../out/browser/public/Terminal';
 import { AttachAddon } from '../addons/xterm-addon-attach/out/AttachAddon';
+import { CanvasAddon } from '../addons/xterm-addon-canvas/out/CanvasAddon';
 import { FitAddon } from '../addons/xterm-addon-fit/out/FitAddon';
 import { SearchAddon, ISearchOptions } from '../addons/xterm-addon-search/out/SearchAddon';
 import { SerializeAddon } from '../addons/xterm-addon-serialize/out/SerializeAddon';
@@ -60,6 +61,7 @@ interface IDemoAddon<T extends AddonType> {
   canChange: boolean;
   ctor:
     T extends 'attach' ? typeof AttachAddon :
+    T extends 'canvas' ? typeof CanvasAddon :
     T extends 'fit' ? typeof FitAddon :
     T extends 'search' ? typeof SearchAddon :
     T extends 'serialize' ? typeof SerializeAddon :
@@ -69,6 +71,7 @@ interface IDemoAddon<T extends AddonType> {
     typeof WebglAddon;
     instance?:
     T extends 'attach' ? AttachAddon :
+    T extends 'canvas' ? CanvasAddon :
     T extends 'fit' ? FitAddon :
     T extends 'search' ? SearchAddon :
     T extends 'serialize' ? SerializeAddon :
diff --git a/src/browser/Terminal.ts b/src/browser/Terminal.ts
index 91c4a920..c59a065a 100644
--- a/src/browser/Terminal.ts
+++ b/src/browser/Terminal.ts
@@ -28,7 +28,6 @@ import { Viewport } from 'browser/Viewport';
 import { rightClickHandler, moveTextAreaUnderMouseCursor, handlePasteEvent, copyHandler, paste } from 'browser/Clipboard';
 import { C0, C1_ESCAPED } from 'common/data/EscapeSequences';
 import { WindowsOptionsReportType } from '../common/InputHandler';
-import { Renderer } from 'browser/renderer/Renderer';
 import { SelectionService } from 'browser/services/SelectionService';
 import * as Browser from 'common/Platform';
 import { addDisposableDomListener } from 'browser/Lifecycle';
@@ -609,7 +608,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
   }
 
   private _createRenderer(): IRenderer {
-    return this._instantiationService.createInstance(Renderer, this._colorManager!.colors, this.screenElement!, this.linkifier2);
+    return this._instantiationService.createInstance(DomRenderer, this._colorManager!.colors, this.element!, this.screenElement!, this._viewportElement!, this.linkifier2);
   }
 
   /**
diff --git a/src/browser/renderer/atlas/Constants.ts b/src/browser/renderer/Constants.ts
similarity index 93%
rename from src/browser/renderer/atlas/Constants.ts
rename to src/browser/renderer/Constants.ts
index c1701e97..ac698b85 100644
--- a/src/browser/renderer/atlas/Constants.ts
+++ b/src/browser/renderer/Constants.ts
@@ -6,10 +6,9 @@
 import { isFirefox, isLegacyEdge } from 'common/Platform';
 
 export const INVERTED_DEFAULT_COLOR = 257;
+
 export const DIM_OPACITY = 0.5;
 // The text baseline is set conditionally by browser. Using 'ideographic' for Firefox or Legacy Edge would
 // result in truncated text (Issue 3353). Using 'bottom' for Chrome would result in slightly
 // unaligned Powerline fonts (PR 3356#issuecomment-850928179).
 export const TEXT_BASELINE: CanvasTextBaseline = isFirefox || isLegacyEdge ? 'bottom' : 'ideographic';
-
-export const CHAR_ATLAS_CELL_SPACING = 1;
diff --git a/src/browser/renderer/Types.d.ts b/src/browser/renderer/Types.d.ts
index 6818a926..cb1a85b4 100644
--- a/src/browser/renderer/Types.d.ts
+++ b/src/browser/renderer/Types.d.ts
@@ -54,56 +54,3 @@ export interface IRenderer extends IDisposable {
   renderRows(start: number, end: number): void;
   clearTextureAtlas?(): void;
 }
-
-export interface IRenderLayer extends IDisposable {
-  /**
-   * Called when the terminal loses focus.
-   */
-  onBlur(): void;
-
-  /**
-   * * Called when the terminal gets focus.
-   */
-  onFocus(): void;
-
-  /**
-   * Called when the cursor is moved.
-   */
-  onCursorMove(): void;
-
-  /**
-   * Called when options change.
-   */
-  onOptionsChanged(): void;
-
-  /**
-   * Called when the theme changes.
-   */
-  setColors(colorSet: IColorSet): void;
-
-  /**
-   * Called when the data in the grid has changed (or needs to be rendered
-   * again).
-   */
-  onGridChanged(startRow: number, endRow: number): void;
-
-  /**
-   * Calls when the selection changes.
-   */
-  onSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void;
-
-  /**
-   * Resize the render layer.
-   */
-  resize(dim: IRenderDimensions): void;
-
-  /**
-   * Clear the state of the render layer.
-   */
-  reset(): void;
-
-  /**
-   * Clears the texture atlas.
-   */
-  clearTextureAtlas(): void;
-}
diff --git a/src/browser/renderer/dom/DomRenderer.ts b/src/browser/renderer/dom/DomRenderer.ts
index a4500e39..991938e4 100644
--- a/src/browser/renderer/dom/DomRenderer.ts
+++ b/src/browser/renderer/dom/DomRenderer.ts
@@ -5,7 +5,7 @@
 
 import { IRenderer, IRenderDimensions, IRequestRedrawEvent } from 'browser/renderer/Types';
 import { BOLD_CLASS, ITALIC_CLASS, CURSOR_CLASS, CURSOR_STYLE_BLOCK_CLASS, CURSOR_BLINK_CLASS, CURSOR_STYLE_BAR_CLASS, CURSOR_STYLE_UNDERLINE_CLASS, DomRendererRowFactory } from 'browser/renderer/dom/DomRendererRowFactory';
-import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/atlas/Constants';
+import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/Constants';
 import { Disposable } from 'common/Lifecycle';
 import { IColorSet, ILinkifierEvent, ILinkifier2 } from 'browser/Types';
 import { ICharSizeService } from 'browser/services/Services';
diff --git a/src/browser/renderer/dom/DomRendererRowFactory.ts b/src/browser/renderer/dom/DomRendererRowFactory.ts
index fadf5032..35b8b0e7 100644
--- a/src/browser/renderer/dom/DomRendererRowFactory.ts
+++ b/src/browser/renderer/dom/DomRendererRowFactory.ts
@@ -4,13 +4,13 @@
  */
 
 import { IBufferLine, ICellData, IColor } from 'common/Types';
-import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/atlas/Constants';
+import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/Constants';
 import { NULL_CELL_CODE, WHITESPACE_CELL_CHAR, Attributes } from 'common/buffer/Constants';
 import { CellData } from 'common/buffer/CellData';
-import { IBufferService, ICoreService, IDecorationService, IOptionsService } from 'common/services/Services';
+import { ICoreService, IDecorationService, IOptionsService } from 'common/services/Services';
 import { color, rgba } from 'common/Color';
 import { IColorSet } from 'browser/Types';
-import { ICharacterJoinerService, ISelectionService } from 'browser/services/Services';
+import { ICharacterJoinerService } from 'browser/services/Services';
 import { JoinedCellData } from 'browser/services/CharacterJoinerService';
 import { excludeFromContrastRatioDemands } from 'browser/renderer/RendererUtils';
 
diff --git a/tsconfig.all.json b/tsconfig.all.json
index 6fa02446..4d2df306 100644
--- a/tsconfig.all.json
+++ b/tsconfig.all.json
@@ -7,6 +7,7 @@
     { "path": "./test/api" },
     { "path": "./test/benchmark" },
     { "path": "./addons/xterm-addon-attach" },
+    { "path": "./addons/xterm-addon-canvas" },
     { "path": "./addons/xterm-addon-fit" },
     { "path": "./addons/xterm-addon-ligatures" },
     { "path": "./addons/xterm-addon-search" },