Fix inverse dim on canvas renderer

src/browser/renderer/BaseRenderLayer.ts

@@ -345,6 +345,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
       }
     }
 
+    console.log(`draw char ${cell.getChars()} with style`, this._ctx.fillStyle);
     const atlasDidDraw = hasOverrides ? false : this._charAtlas?.draw(this._ctx, this._currentGlyphIdentifier, x * this._scaledCellWidth + this._scaledCharLeft, y * this._scaledCellHeight + this._scaledCharTop);
 
     if (!atlasDidDraw) {

src/browser/renderer/TextRenderLayer.ts

@@ -181,9 +181,7 @@ export class TextRenderLayer extends BaseRenderLayer {
       // Apply dim to the background, this is relatively slow as the CSS is re-parsed but dim is
       // rarely used
       if (nextFillStyle && cell.isDim()) {
-        console.log('old', nextFillStyle);
         nextFillStyle = color.multiplyOpacity(css.toColor(nextFillStyle), 0.5).css;
-        console.log('new', nextFillStyle);
       }
 
       // Get any decoration foreground/background overrides, this must be fetched before the early

src/browser/renderer/atlas/DynamicCharAtlas.ts

@@ -225,13 +225,18 @@ export class DynamicCharAtlas extends BaseCharAtlas {
       // around the anti-aliased edges of the glyph, and it would look too dark.
       return TRANSPARENT_COLOR;
     }
+    let result: IColor;
     if (glyph.bg === INVERTED_DEFAULT_COLOR) {
-      return this._config.colors.foreground;
+      result = this._config.colors.foreground;
+    } else if (glyph.bg < 256) {
+      result = this._getColorFromAnsiIndex(glyph.bg);
+    } else {
+      result = this._config.colors.background;
     }
-    if (glyph.bg < 256) {
+    if (glyph.dim) {
-      return this._getColorFromAnsiIndex(glyph.bg);
+      result = color.blend(this._config.colors.background, color.multiplyOpacity(result, 0.5));
     }
-    return this._config.colors.background;
+    return result;
   }
 
   private _getForegroundColor(glyph: IGlyphIdentifier): IColor {
@@ -274,6 +279,7 @@ export class DynamicCharAtlas extends BaseCharAtlas {
     if (glyph.dim) {
       this._tmpCtx.globalAlpha = DIM_OPACITY;
     }
+
     // Draw the character
     this._tmpCtx.fillText(glyph.chars, 0, this._config.scaledCharHeight);