Draw text using decimal numbers

Fixes #972

src/renderer/BaseRenderLayer.ts

@@ -78,6 +78,16 @@ export abstract class BaseRenderLayer implements IRenderLayer {
 
   public abstract reset(terminal: ITerminal): void;
 
+  /**
+   * Gets the left position of a cell. Since character width is stored as a
+   * float in order to prevent bad letter spacing, drawing shapes in the cell
+   * need to be rounded.
+   * @param x The column of the cell.
+   */
+  private _getCellLeft(x: number): number {
+    return Math.round(x * this.scaledCharWidth);
+  }
+
   /**
    * Fills 1+ cells completely. This uses the existing fillStyle on the context.
    * @param x The column to start at.
@@ -86,7 +96,12 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    * @param height The number of rows to fill.
    */
   protected fillCells(x: number, y: number, width: number, height: number): void {
-    this._ctx.fillRect(x * this.scaledCharWidth, y * this.scaledLineHeight, width * this.scaledCharWidth, height * this.scaledLineHeight);
+    const cellLeft = this._getCellLeft(x);
+    this._ctx.fillRect(
+      cellLeft,
+      y * this.scaledLineHeight,
+      this._getCellLeft(x + width) - cellLeft,
+      height * this.scaledLineHeight);
   }
 
   /**
@@ -96,10 +111,11 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    * @param y The row to fill.
    */
   protected fillBottomLineAtCells(x: number, y: number, width: number = 1): void {
+    const cellLeft = this._getCellLeft(x);
     this._ctx.fillRect(
-        x * this.scaledCharWidth,
+        cellLeft,
         (y + 1) * this.scaledLineHeight - window.devicePixelRatio - 1 /* Ensure it's drawn within the cell */,
-        width * this.scaledCharWidth,
+        this._getCellLeft(x + width) - cellLeft,
         window.devicePixelRatio);
   }
 
@@ -111,7 +127,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    */
   protected fillLeftLineAtCell(x: number, y: number): void {
     this._ctx.fillRect(
-        x * this.scaledCharWidth,
+        this._getCellLeft(x),
         y * this.scaledLineHeight,
         window.devicePixelRatio,
         this.scaledLineHeight);
@@ -124,11 +140,12 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    * @param y The row to fill.
    */
   protected strokeRectAtCell(x: number, y: number, width: number, height: number): void {
+    const cellLeft = this._getCellLeft(x);
     this._ctx.lineWidth = window.devicePixelRatio;
     this._ctx.strokeRect(
-        x * this.scaledCharWidth + window.devicePixelRatio / 2,
+        cellLeft + window.devicePixelRatio / 2,
         y * this.scaledLineHeight + (window.devicePixelRatio / 2),
-        (width * this.scaledCharWidth) - window.devicePixelRatio,
+        this._getCellLeft(x + width) - cellLeft - window.devicePixelRatio,
         (height * this.scaledLineHeight) - window.devicePixelRatio);
   }
 
@@ -147,7 +164,12 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    * @param height The number of rows to clear.
    */
   protected clearCells(x: number, y: number, width: number, height: number): void {
-    this._ctx.clearRect(x * this.scaledCharWidth, y * this.scaledLineHeight, width * this.scaledCharWidth, height * this.scaledLineHeight);
+    const cellLeft = this._getCellLeft(x);
+    this._ctx.clearRect(
+        cellLeft,
+        y * this.scaledLineHeight,
+        this._getCellLeft(x + width) - cellLeft,
+        height * this.scaledLineHeight);
   }
 
   /**