diff --git a/src/browser/renderer/BaseRenderLayer.ts b/src/browser/renderer/BaseRenderLayer.ts index 39819353..3d0128fe 100644 --- a/src/browser/renderer/BaseRenderLayer.ts +++ b/src/browser/renderer/BaseRenderLayer.ts @@ -412,7 +412,7 @@ export abstract class BaseRenderLayer implements IRenderLayer { if (!lineSegments) { return false; } - const xOffset = x * this._scaledCellWidth + this._scaledCharLeft; + const xOffset = x * this._scaledCellWidth; const verticalCenter = Math.round(this._scaledCellHeight / 2); const yOffset = y * this._scaledCellHeight + this._scaledCharTop + verticalCenter; @@ -420,10 +420,10 @@ export abstract class BaseRenderLayer implements IRenderLayer { this._ctx.strokeStyle = this._ctx.fillStyle; // increase # of pixels when font size incremented by 10 - this._ctx.lineWidth = Math.max(Math.floor(this._optionsService.options.fontSize / 10), 1); + // this._ctx.lineWidth = Math.max(Math.floor(this._optionsService.options.fontSize / 10), 1); const horizontalCenter = Math.round(this._scaledCellWidth / 2); // yOffset - verticalCenter - draw(this._ctx, char, xOffset, y * this._scaledCellHeight + this._scaledCharTop, this._scaledCellWidth, this._scaledCellHeight); + draw(this._ctx, char, xOffset, y * this._scaledCellHeight, this._scaledCellWidth, this._scaledCellHeight); return true; diff --git a/src/browser/renderer/BoxAndBlockCharacters.ts b/src/browser/renderer/BoxAndBlockCharacters.ts index 379bc2d7..0bbc487f 100644 --- a/src/browser/renderer/BoxAndBlockCharacters.ts +++ b/src/browser/renderer/BoxAndBlockCharacters.ts @@ -372,6 +372,7 @@ export function draw(ctx: CanvasRenderingContext2D, c: string, xOffset: number, } const lineWidth = ctx.lineWidth; const instructions = entry.split(' '); + for (const instruction of instructions) { const type = instruction[0]; const spec = instructionMap[type]; @@ -379,17 +380,31 @@ export function draw(ctx: CanvasRenderingContext2D, c: string, xOffset: number, if (!coords[0] || !coords[1]) { continue; } - const numX = Number.parseFloat(coords[0].toString()) || Number.parseInt(coords[0].toString()); - const numY = Number.parseFloat(coords[1].toString()) || Number.parseInt(coords[1].toString()); + let numX = Number.parseFloat(coords[0].toString()) || Number.parseInt(coords[0].toString()); + let numY = Number.parseFloat(coords[1].toString()) || Number.parseInt(coords[1].toString()); if (instruction.endsWith(THICK)) { - ctx.lineWidth = lineWidth * 2; + ctx.lineWidth = window.devicePixelRatio * 2; } else { - ctx.lineWidth = lineWidth; + ctx.lineWidth = window.devicePixelRatio; } - spec(ctx, xOffset + Math.round((numX) * cellWidth), yOffset + ((numY)) * cellHeight); + + numX *= cellWidth; + numY *= cellHeight; + + if (numY !== 0) { + numY = clamp(Math.round(numY + .5) - .5, cellHeight, 0); + } + if (numX !== 0) { + numX = clamp(Math.round(numX + .5) - .5, cellWidth, 0); + } + spec(ctx, xOffset + numX, yOffset + numY); } } +function clamp(value: number, max: number, min: number = 0): number { + return Math.max(Math.min(value, max), min); +} + const instructionMap: { [index: string]: any } = { 'M': (ctx: CanvasRenderingContext2D, x: number, y: number) => { ctx.beginPath();