From a7b14b9fbb2215c806eda40aa0883f54cfc2e5fc Mon Sep 17 00:00:00 2001
From: Andras Schmelczer <andras@schmelczer.dev>
Date: Sat, 20 May 2023 10:04:29 +0100
Subject: [PATCH] Fix brush on mobile

---
 src/game-loop/game-loop.ts | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/game-loop/game-loop.ts b/src/game-loop/game-loop.ts
index fd750f7..5f20596 100644
--- a/src/game-loop/game-loop.ts
+++ b/src/game-loop/game-loop.ts
@@ -36,7 +36,7 @@ export default class GameLoop {
     private readonly canvas: HTMLCanvasElement,
     private readonly device: GPUDevice
   ) {
-    const context = this.canvas.getContext('webgpu') as any;
+    const context = this.canvas.getContext('webgpu') as any as GPUCanvasContext;
     context.configure({
       device: this.device,
       format: navigator.gpu.getPreferredCanvasFormat(),
@@ -82,15 +82,17 @@ export default class GameLoop {
       return;
     }
 
-    this.brushPipeline.addSwipe(
-      vec2.fromValues(event.clientX, this.canvas.height - event.clientY)
+    const position = vec2.fromValues(
+      event.clientX * this.devicePixelRatio,
+      this.canvas.height - event.clientY * this.devicePixelRatio
     );
+    this.brushPipeline.addSwipe(position);
   }
 
   private resize() {
     const devicePixelRatio = window.devicePixelRatio || 1;
-    this.canvas.width = this.canvas.clientWidth * devicePixelRatio;
-    this.canvas.height = this.canvas.clientHeight * devicePixelRatio;
+    this.canvas.width = this.canvas.clientWidth * this.devicePixelRatio;
+    this.canvas.height = this.canvas.clientHeight * this.devicePixelRatio;
   }
 
   private async render(time: DOMHighResTimeStamp) {
@@ -167,4 +169,8 @@ export default class GameLoop {
   private get canvasSize(): vec2 {
     return vec2.fromValues(this.canvas.width, this.canvas.height);
   }
+
+  private get devicePixelRatio(): number {
+    return window.devicePixelRatio || 1;
+  }
 }