1.2.7

*Fixed canvas being misaligned with touch inputs

Author: FlaminWrap

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Budibase-Signature-Plugin",
-  "version": "1.2.5",
+  "version": "1.2.7",
   "description": "A plugin that allows signatures to be created and saved in budibase",
   "license": "MIT",
   "svelte": "index.js",

src/Canvas.svelte

@@ -48,6 +48,9 @@
 	
 	const handleStart = (({ offsetX: x, offsetY: y }) => { 
         if (!inBuilder){
+            const { top, left } = canvas.getBoundingClientRect()
+            t = top
+            l = left
             if(color === background) {
                 context.clearRect(0, 0, width, height)
             } else {
@@ -66,15 +69,23 @@
 
 	const handleMove = (({ offsetX: x1, offsetY: y1 }) => {
         if (!inBuilder){
+            const { top, left } = canvas.getBoundingClientRect()
+            t = top
+            l = left
             if(!isDrawing) return
             
             const { x, y } = start
-            context.beginPath()
-            context.moveTo(x, y)
-            context.lineTo(x1, y1)
-            context.closePath()
-            context.stroke()
-            
+
+            if (x >= 0){
+                if (y >= 0){
+                context.beginPath()
+                context.moveTo(x, y)
+                context.lineTo(x1, y1)
+                context.closePath()
+                context.stroke()
+                }
+            }
+
             start = { x: x1, y: y1 }
         }
 	})
@@ -161,7 +172,7 @@
 				style:background
 				bind:this={canvas} 
 				on:mousedown={handleStart}	
-				on:touchstart={e => {
+				on:touchstart|preventDefault={e => {
 					const { clientX, clientY } = e.touches[0]
 					handleStart({
 						offsetX: clientX - l,