smooth image when zoomed out

src/client/graphics/GameRenderer.ts

@@ -126,7 +126,7 @@ export function createRenderer(
   playerPanel.emojiTable = emojiTable;
 
   const layers: Layer[] = [
-    new TerrainLayer(game),
+    new TerrainLayer(game, transformHandler),
     new TerritoryLayer(game, eventBus),
     new StructureLayer(game, eventBus),
     new UnitLayer(game, eventBus, clientID, transformHandler),

src/client/graphics/layers/TerrainLayer.ts

@@ -1,5 +1,6 @@
 import { Theme } from "../../../core/configuration/Config";
 import { GameView } from "../../../core/game/GameView";
+import { TransformHandler } from "../TransformHandler";
 import { Layer } from "./Layer";
 
 export class TerrainLayer implements Layer {
@@ -8,7 +9,10 @@ export class TerrainLayer implements Layer {
   private imageData: ImageData;
   private theme: Theme;
 
-  constructor(private game: GameView) {}
+  constructor(
+    private game: GameView,
+    private transformHandler: TransformHandler,
+  ) {}
   shouldTransform(): boolean {
     return true;
   }
@@ -54,6 +58,13 @@ export class TerrainLayer implements Layer {
   }
 
   renderLayer(context: CanvasRenderingContext2D) {
+    console.log(this.transformHandler.scale);
+    if (this.transformHandler.scale < 1) {
+      context.imageSmoothingEnabled = true;
+      context.imageSmoothingQuality = "low";
+    } else {
+      context.imageSmoothingEnabled = false;
+    }
     context.drawImage(
       this.canvas,
       -this.game.width() / 2,