diff --git a/src/renderer/Renderer.ts b/src/renderer/Renderer.ts index a2b8a7fe..63782afd 100644 --- a/src/renderer/Renderer.ts +++ b/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