Fixed absolute value in point x

src/app.js

@@ -200,10 +200,14 @@ const onRoomConnect = (room_) => {
     HTML.undoButton.classList.remove("disabled")
   })
 
+  const topPanelHeight = HTML.topPanel.offsetHeight
+  console.log("Top panel height: " + topPanelHeight)
+
   HTML.canvas.addEventListener("touchstart", (e) => {
     e.preventDefault()
     let pressure = 0
     let x, y
+    const topPanelHeight = HTML.topPanel.offsetHeight
     if (
       e.touches &&
       e.touches[0] &&
@@ -213,11 +217,11 @@ const onRoomConnect = (room_) => {
         pressure = e.touches[0]["force"]
       }
       x = e.touches[0].pageX
-      y = e.touches[0].pageY - 100
+      y = e.touches[0].pageY - topPanelHeight
     } else {
       pressure = 1.0
       x = e.pageX
-      y = e.pageY - 100
+      y = e.pageY - topPanelHeight
     }
 
     clearRecognizedUpcoming()
@@ -243,6 +247,7 @@ const onRoomConnect = (room_) => {
   HTML.canvas.addEventListener("touchmove", (e) => {
     let pressure = 0
     let x, y
+    const topPanelHeight = HTML.topPanel.offsetHeight
     if (
       e.touches &&
       e.touches[0] &&
@@ -252,11 +257,11 @@ const onRoomConnect = (room_) => {
         pressure = e.touches[0]["force"]
       }
       x = e.touches[0].pageX
-      y = e.touches[0].pageY - 100
+      y = e.touches[0].pageY - topPanelHeight
     } else {
       pressure = 1.0
       x = e.pageX
-      y = e.pageY - 100
+      y = e.pageY - topPanelHeight
     }
 
     if (room == null) {

src/elements.js

@@ -34,3 +34,4 @@ export const strokeRadiusSlider = document.getElementById("range")
 export const output = document.getElementById("value")
 export const labelColours = document.getElementById("colours")
 export const userInfo = document.getElementById("user-avatar")
+export const topPanel = document.getElementById("top-panel")