From 019a9dc57cb9034d2b83b64a994566cbc97b1fe5 Mon Sep 17 00:00:00 2001
From: Franz Vrolijk <37187509+franzvrolijk@users.noreply.github.com>
Date: Wed, 24 Sep 2025 01:56:35 +0200
Subject: [PATCH] Fixed terrain layer not rendering properly in Firefox (#2083)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description:

Fixed terrain layer not rendering properly in Firefox.

- Resize the canvas before working with pixel data
- Changing canvas size (even to the same size) clears the buffer, so
getImageData() taken before resize isn’t valid for putImageData()
(Firefox seems to be more strict in enforcing this than Chrome)

- Replaced getImageData() with createImageData() since the cleared
canvas has no pixel data to read anyway

Before:
<img width="1911" height="1289"
alt="{39DC7F5A-A01C-4D1A-94C5-6DE7A73E6F66}"
src="https://github.com/user-attachments/assets/23f80289-5331-429a-85df-7c330cf8b42b"
/>

After:
<img width="1898" height="1286"
alt="{4D330565-E6F2-4AFC-8191-7E7DB36E065B}"
src="https://github.com/user-attachments/assets/acf62391-3123-4d55-a5ca-fb20f48f2d41"
/>

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory **(not
relevant)**
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

franz4557
---
 src/client/graphics/layers/TerrainLayer.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/client/graphics/layers/TerrainLayer.ts b/src/client/graphics/layers/TerrainLayer.ts
index d89f43427..6e9f79c1b 100644
--- a/src/client/graphics/layers/TerrainLayer.ts
+++ b/src/client/graphics/layers/TerrainLayer.ts
@@ -29,19 +29,19 @@ export class TerrainLayer implements Layer {
 
   redraw(): void {
     this.canvas = document.createElement("canvas");
+    this.canvas.width = this.game.width();
+    this.canvas.height = this.game.height();
+
     const context = this.canvas.getContext("2d");
     if (context === null) throw new Error("2d context not supported");
     this.context = context;
 
-    this.imageData = this.context.getImageData(
-      0,
-      0,
-      this.game.width(),
-      this.game.height(),
+    this.imageData = this.context.createImageData(
+      this.canvas.width,
+      this.canvas.height,
     );
+
     this.initImageData();
-    this.canvas.width = this.game.width();
-    this.canvas.height = this.game.height();
     this.context.putImageData(this.imageData, 0, 0);
   }