diff --git a/src/client/ClientGame.ts b/src/client/ClientGame.ts
index 8a7e3ee65..cdd5e1e76 100644
--- a/src/client/ClientGame.ts
+++ b/src/client/ClientGame.ts
@@ -11,13 +11,15 @@ import {and, bfs, dist, manhattanDist} from "../core/Util";
 import {TerrainLayer} from "./graphics/layers/TerrainLayer";
 import {WinCheckExecution} from "../core/execution/WinCheckExecution";
 import {SendAllianceRequestUIEvent} from "./graphics/layers/UILayer";
+import {createCanvas} from "./graphics/Utils";
 
 
 
 export function createClientGame(name: string, clientID: ClientID, playerID: PlayerID, ip: string | null, gameID: GameID, config: Config, terrainMap: TerrainMap): ClientGame {
     let eventBus = new EventBus()
     let game = createGame(terrainMap, eventBus, config)
-    let gameRenderer = createRenderer(game, eventBus, clientID)
+    const canvas = createCanvas()
+    let gameRenderer = createRenderer(canvas, game, eventBus, clientID)
 
     return new ClientGame(
         name,
@@ -28,7 +30,7 @@ export function createClientGame(name: string, clientID: ClientID, playerID: Pla
         eventBus,
         game,
         gameRenderer,
-        new InputHandler(eventBus),
+        new InputHandler(canvas, eventBus),
         new Executor(game, gameID)
     )
 }
diff --git a/src/client/InputHandler.ts b/src/client/InputHandler.ts
index ccc0abc0f..7bf6cf929 100644
--- a/src/client/InputHandler.ts
+++ b/src/client/InputHandler.ts
@@ -53,17 +53,16 @@ export class InputHandler {
 
     private pointerDown: boolean = false
 
-    constructor(private eventBus: EventBus) { }
+    constructor(private canvas: HTMLCanvasElement, private eventBus: EventBus) { }
 
     initialize() {
-        document.addEventListener("pointerdown", (e) => this.onPointerDown(e));
-        document.addEventListener("pointerup", (e) => this.onPointerUp(e));
-        document.addEventListener("wheel", (e) => this.onScroll(e), {passive: false});
-        document.addEventListener('pointermove', this.onPointerMove.bind(this));
-        document.addEventListener('contextmenu', (e: MouseEvent) => {
-            this.onRightClick(e)
+        this.canvas.addEventListener("pointerdown", (e) => this.onPointerDown(e));
+        this.canvas.addEventListener("pointerup", (e) => this.onPointerUp(e));
+        this.canvas.addEventListener("wheel", (e) => this.onScroll(e), {passive: false});
+        this.canvas.addEventListener('pointermove', this.onPointerMove.bind(this));
+        this.canvas.addEventListener('contextmenu', (e: MouseEvent) => {
+            this.onRightClick(e);
         });
-
         this.pointers.clear()
     }
 
diff --git a/src/client/graphics/GameRenderer.ts b/src/client/graphics/GameRenderer.ts
index ec0d75c7e..99fbc97e4 100644
--- a/src/client/graphics/GameRenderer.ts
+++ b/src/client/graphics/GameRenderer.ts
@@ -11,8 +11,7 @@ import {Layer} from "./layers/Layer";
 import {EventsDisplay} from "./layers/EventsDisplay";
 
 
-export function createRenderer(game: Game, eventBus: EventBus, clientID: ClientID): GameRenderer {
-	const canvas = createCanvas()
+export function createRenderer(canvas: HTMLCanvasElement, game: Game, eventBus: EventBus, clientID: ClientID): GameRenderer {
 	const transformHandler = new TransformHandler(game, eventBus, canvas)
 
 	const layers: Layer[] = [