From ee0e9448cdb9eb8202f1906d027b1d0ddd6557b0 Mon Sep 17 00:00:00 2001 From: Stuart Lang Date: Sat, 10 Jan 2026 11:46:03 +0000 Subject: [PATCH 1/2] fix: clear canvas before filling to support transparent backgrounds When using a transparent background color, fillRect composites rather than replaces pixels. Add clearRect before fillRect in renderLine, clear, and renderScrollbar to properly erase previous content before applying the background color. This fixes content piling up when using transparent backgrounds and ensures selection highlighting clears properly. Co-Authored-By: Claude Haiku 4.5 --- lib/renderer.ts | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/lib/renderer.ts b/lib/renderer.ts index 0e682be..dbe2a9e 100644 --- a/lib/renderer.ts +++ b/lib/renderer.ts @@ -515,12 +515,16 @@ export class CanvasRenderer { */ private renderLine(line: GhosttyCell[], y: number, cols: number): void { const lineY = y * this.metrics.height; + const lineWidth = cols * this.metrics.width; - // Clear line background with theme color. + // Clear line background then fill with theme color. // We clear just the cell area - glyph overflow is handled by also // redrawing adjacent rows (see render() method). + // clearRect is needed because fillRect composites rather than replaces, + // so transparent/translucent backgrounds wouldn't clear previous content. + this.ctx.clearRect(0, lineY, lineWidth, this.metrics.height); this.ctx.fillStyle = this.theme.background; - this.ctx.fillRect(0, lineY, cols * this.metrics.width, this.metrics.height); + this.ctx.fillRect(0, lineY, lineWidth, this.metrics.height); // PASS 1: Draw all cell backgrounds first // This ensures all backgrounds are painted before any text, allowing text @@ -790,6 +794,7 @@ export class CanvasRenderer { this.theme.brightCyan, this.theme.brightWhite, ]; + } /** @@ -854,6 +859,7 @@ export class CanvasRenderer { const scrollbarTrackHeight = canvasHeight - scrollbarPadding * 2; // Always clear the scrollbar area first (fixes ghosting when fading out) + ctx.clearRect(scrollbarX - 2, 0, scrollbarWidth + 6, canvasHeight); ctx.fillStyle = this.theme.background; ctx.fillRect(scrollbarX - 2, 0, scrollbarWidth + 6, canvasHeight); @@ -966,6 +972,9 @@ export class CanvasRenderer { * Clear entire canvas */ public clear(): void { + // clearRect first because fillRect composites rather than replaces, + // so transparent/translucent backgrounds wouldn't clear previous content. + this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); this.ctx.fillStyle = this.theme.background; this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height); } From 79e37348375055a57d10f9286e3371faa303d859 Mon Sep 17 00:00:00 2001 From: Stuart Lang Date: Tue, 13 Jan 2026 00:24:13 +0000 Subject: [PATCH 2/2] style: remove extra blank line Co-Authored-By: Claude Opus 4.5 --- lib/renderer.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/renderer.ts b/lib/renderer.ts index dbe2a9e..dafb01e 100644 --- a/lib/renderer.ts +++ b/lib/renderer.ts @@ -794,7 +794,6 @@ export class CanvasRenderer { this.theme.brightCyan, this.theme.brightWhite, ]; - } /**