pixel perfect canvas rendering of box and block characters

demo/client.ts

@@ -214,16 +214,17 @@ function createTerminal(): void {
     // Set terminal size again to set the specific dimensions on the demo
     updateTerminalSize();
 
-    fetch('/terminals?cols=' + term.cols + '&rows=' + term.rows, {method: 'POST'}).then((res) => {
-      res.text().then((processId) => {
-        pid = processId;
-        socketURL += processId;
-        socket = new WebSocket(socketURL);
-        socket.onopen = runRealTerminal;
-        socket.onclose = runFakeTerminal;
-        socket.onerror = runFakeTerminal;
-      });
-    });
+    // fetch('/terminals?cols=' + term.cols + '&rows=' + term.rows, {method: 'POST'}).then((res) => {
+    //   res.text().then((processId) => {
+    //     pid = processId;
+    //     socketURL += processId;
+    //     socket = new WebSocket(socketURL);
+    //     socket.onopen = runRealTerminal;
+    //     socket.onclose = runFakeTerminal;
+    //     socket.onerror = runFakeTerminal;
+    //   });
+    // });
+    runFakeTerminal();
   }, 0);
 }
 
@@ -246,11 +247,33 @@ function runFakeTerminal(): void {
     term.write('\r\n$ ');
   };
 
-  term.writeln('Welcome to xterm.js');
-  term.writeln('This is a local terminal emulation, without a real terminal in the back-end.');
-  term.writeln('Type some keys and commands to play around.');
-  term.writeln('');
-  term.prompt();
+  // term.writeln('Welcome to xterm.js');
+  // term.writeln('This is a local terminal emulation, without a real terminal in the back-end.');
+  // term.writeln('Type some keys and commands to play around.');
+  // term.writeln('');
+  // term.prompt();
+
+  term.write('Box styles:       ┎┰┒┍┯┑╓╥╖╒╤╕ ┏┳┓┌┲┓┌┬┐┏┱┐\n\r');
+  term.write('┌─┬─┐ ┏━┳━┓ ╔═╦═╗ ┠╂┨┝┿┥╟╫╢╞╪╡ ┡╇┩├╊┫┢╈┪┣╉┤\n\r');
+  term.write('│ │ │ ┃ ┃ ┃ ║ ║ ║ ┖┸┚┕┷┙╙╨╜╘╧╛ └┴┘└┺┛┗┻┛┗┹┘\n\r');
+  term.write('├─┼─┤ ┣━╋━┫ ╠═╬═╣ ┏┱┐┌┲┓┌┬┐┌┬┐ ┏┳┓┌┮┓┌┬┐┏┭┐\n\r');
+  term.write('│ │ │ ┃ ┃ ┃ ║ ║ ║ ┡╃┤├╄┩├╆┪┢╅┤ ┞╀┦├┾┫┟╁┧┣┽┤\n\r');
+  term.write('└─┴─┘ ┗━┻━┛ ╚═╩═╝ └┴┘└┴┘└┺┛┗┹┘ └┴┘└┶┛┗┻┛┗┵┘\n\r');
+  term.write('\n\r');
+  term.write('Other:\n\r');
+  term.write('╭─╮ ╲ ╱ ╷╻╎╏┆┇┊┋ ╺╾╴ ╌╌╌ ┄┄┄ ┈┈┈\n\r');
+  term.write('│ │  ╳  ╽╿╎╏┆┇┊┋ ╶╼╸ ╍╍╍ ┅┅┅ ┉┉┉\n\r');
+  term.write('╰─╯ ╱ ╲ ╹╵╎╏┆┇┊┋\n\r');
+  term.write('\n\r');
+  term.write('All box drawing characters:\n\r');
+  term.write('─ ━ │ ┃ ┄ ┅ ┆ ┇ ┈ ┉ ┊ ┋ ┌ ┍ ┎ ┏\n\r');
+  term.write('┐ ┑ ┒ ┓ └ ┕ ┖ ┗ ┘ ┙ ┚ ┛ ├ ┝ ┞ ┟\n\r');
+  term.write('┠ ┡ ┢ ┣ ┤ ┥ ┦ ┧ ┨ ┩ ┪ ┫ ┬ ┭ ┮ ┯\n\r');
+  term.write('┰ ┱ ┲ ┳ ┴ ┵ ┶ ┷ ┸ ┹ ┺ ┻ ┼ ┽ ┾ ┿\n\r');
+  term.write('╀ ╁ ╂ ╃ ╄ ╅ ╆ ╇ ╈ ╉ ╊ ╋ ╌ ╍ ╎ ╏\n\r');
+  term.write('═ ║ ╒ ╓ ╔ ╕ ╖ ╗ ╘ ╙ ╚ ╛ ╜ ╝ ╞ ╟\n\r');
+  term.write('╠ ╡ ╢ ╣ ╤ ╥ ╦ ╧ ╨ ╩ ╪ ╫ ╬ ╭ ╮ ╯\n\r');
+  term.write('╰ ╱ ╲ ╳ ╴ ╵ ╶ ╷ ╸ ╹ ╺ ╻ ╼ ╽ ╾ ╿\n\r');
 
   term.onKey((e: { key: string, domEvent: KeyboardEvent }) => {
     const ev = e.domEvent;

src/browser/renderer/BaseRenderLayer.ts

@@ -17,6 +17,7 @@ import { IBufferService, IOptionsService } from 'common/services/Services';
 import { throwIfFalsy } from 'browser/renderer/RendererUtils';
 import { channels, color, rgba } from 'browser/Color';
 import { removeElementFromParent } from 'browser/Dom';
+import { boxCharacters, boxDrawingBoxes, drawBoxChar } from 'browser/renderer/BoxAndBlockCharacters';
 
 export abstract class BaseRenderLayer implements IRenderLayer {
   private _canvas: HTMLCanvasElement;
@@ -259,10 +260,13 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     this._ctx.font = this._getFont(false, false);
     this._ctx.textBaseline = 'ideographic';
     this._clipRow(y);
-    this._ctx.fillText(
-      cell.getChars(),
-      x * this._scaledCellWidth + this._scaledCharLeft,
-      y * this._scaledCellHeight + this._scaledCharTop + this._scaledCharHeight);
+    // TODO: fix
+    if (!this._drawBoxChar(cell, x, y)) {
+      this._ctx.fillText(
+        cell.getChars(),
+        x * this._scaledCellWidth + this._scaledCharLeft,
+        y * this._scaledCellHeight + this._scaledCharTop + this._scaledCharHeight);
+    }
   }
 
   /**
@@ -373,14 +377,47 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     if (cell.isDim()) {
       this._ctx.globalAlpha = DIM_OPACITY;
     }
-    // Draw the character
-    this._ctx.fillText(
-      cell.getChars(),
-      x * this._scaledCellWidth + this._scaledCharLeft,
-      y * this._scaledCellHeight + this._scaledCharTop + this._scaledCharHeight);
+    if (!this._drawBoxChar(cell, x, y)) {
+      // Draw the character
+      this._ctx.fillText(
+        cell.getChars(),
+        x * this._scaledCellWidth + this._scaledCharLeft,
+        y * this._scaledCellHeight + this._scaledCharTop + this._scaledCharHeight);
+    }
     this._ctx.restore();
   }
 
+  private _drawBoxChar(cell: ICellData, x: number, y: number): boolean {
+    const char = cell.getChars();
+
+    const boxes = boxDrawingBoxes[char];
+    if (boxes) {
+      this._ctx.strokeStyle = this._ctx.fillStyle;
+      const xOffset = x * this._scaledCellWidth + this._scaledCharLeft;
+      const yOffset = y * this._scaledCellHeight + this._scaledCharTop;
+      for (let i = 0; i < boxes.length; i++) {
+        const box = boxes[i];
+        const xEighth = this._scaledCellWidth / 8;
+        const yEighth = this._scaledCellHeight / 8;
+        this._ctx.fillRect(
+          xOffset,
+          yOffset,
+          box.w * xEighth,
+          box.h * yEighth);
+      }
+      return true;
+    }
+
+    const lineSegments = boxCharacters[char];
+    if (!lineSegments) {
+      return false;
+    }
+    this._ctx.strokeStyle = this._ctx.fillStyle;
+    drawBoxChar(this._ctx, char, x * this._scaledCellWidth, y * this._scaledCellHeight, this._scaledCellWidth, this._scaledCellHeight);
+    return true;
+  }
+
+
   /**
    * Clips a row to ensure no pixels will be drawn outside the cells in the row.
    * @param y The row to clip.