From fe4b44f9510f14676469f594446c44c24151b054 Mon Sep 17 00:00:00 2001
From: Deepak Jangra <gtx.addicted@gmail.com>
Date: Tue, 7 Sep 2021 15:19:55 +0530
Subject: [PATCH] Fix offset when scrolled

---
 examples/whiteboard/public/main.js | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/examples/whiteboard/public/main.js b/examples/whiteboard/public/main.js
index 03ea033469..f4b5c5d9d8 100644
--- a/examples/whiteboard/public/main.js
+++ b/examples/whiteboard/public/main.js
@@ -59,19 +59,29 @@
     drawing = true;
     current.x = e.clientX||e.touches[0].clientX;
     current.y = e.clientY||e.touches[0].clientY;
+    current.x -= current.fixX;
+    current.y -= current.fixY;
   }
 
   function onMouseUp(e){
     if (!drawing) { return; }
+    let newX = e.clientX || e.touches[0].clientX;
+    let newY = e.clientY || e.touches[0].clientY;
+    newX -= current.fixX;
+    newY -= current.fixY;
     drawing = false;
-    drawLine(current.x, current.y, e.clientX||e.touches[0].clientX, e.clientY||e.touches[0].clientY, current.color, true);
+    drawLine(current.x, current.y, newX, newY, current.color, true);
   }
 
   function onMouseMove(e){
     if (!drawing) { return; }
+    let newX = e.clientX || e.touches[0].clientX;
+    let newY = e.clientY || e.touches[0].clientY;
+    newX -= current.fixX;
+    newY -= current.fixY;
     drawLine(current.x, current.y, e.clientX||e.touches[0].clientX, e.clientY||e.touches[0].clientY, current.color, true);
-    current.x = e.clientX||e.touches[0].clientX;
-    current.y = e.clientY||e.touches[0].clientY;
+    current.x = newX;
+    current.y = newY;
   }
 
   function onColorUpdate(e){
@@ -101,6 +111,13 @@
   function onResize() {
     canvas.width = window.innerWidth;
     canvas.height = window.innerHeight;
+    fixOffset()
   }
 
+  // Fix offset when scrolled
+  window.addEventListener('scroll', fixOffset, false);
+  function fixOffset() {
+    current.fixX = canvas.getBoundingClientRect().left;
+    current.fixY = canvas.getBoundingClientRect().top;
+  }
 })();