Draw characters to a grid

src/renderer/Renderer.ts

@@ -77,13 +77,11 @@ export class Renderer extends EventEmitter implements IRenderer {
       return;
     }
 
-    // Calculate the scaled character width. Width is kept as a decimal to
-    // provide better letter spacing, otherwise the text can look odd.
-    // Characters drawn using this decimal number do have the potential to
-    // overlap, but only by a single pixel. As such, it's not a big deal when
-    // they do as that pixel is always cleared as necessary before drawing the
-    // character.
-    this.dimensions.scaledCharWidth = this._terminal.charMeasure.width * window.devicePixelRatio;
+    // Calculate the scaled character width. Width is floored as it must be
+    // drawn to an integer grid in order for the CharAtlas "stamps" to not be
+    // blurry. When text is drawn to the grid not using the CharAtlas, it is
+    // clipped to ensure there is no overlap with the next cell.
+    this.dimensions.scaledCharWidth = Math.floor(this._terminal.charMeasure.width * window.devicePixelRatio);
 
     // Calculate the scaled character height. Height is ceiled in case
     // devicePixelRatio is a floating point number in order to ensure there is
@@ -103,7 +101,7 @@ export class Renderer extends EventEmitter implements IRenderer {
     // Recalculate the canvas dimensions; scaled* define the actual number of
     // pixel in the canvas
     this.dimensions.scaledCanvasHeight = this._terminal.rows * this.dimensions.scaledLineHeight;
-    this.dimensions.scaledCanvasWidth = Math.round(this._terminal.cols * this.dimensions.scaledCharWidth);
+    this.dimensions.scaledCanvasWidth = this._terminal.cols * this.dimensions.scaledCharWidth;
 
     // The the size of the canvas on the page. It's very important that this
     // rounds to nearest integer and not ceils as browsers often set