Use canvas for image rendering (#197)

Closes #194, Closes #189

Instead of making the detection image the background of the canvas element the image is now drawn as part of the canvas.  This enables pan and zoom of the image as well.

Reviewed-on: #197

src/pages/touch-mixin.js

@@ -0,0 +1,53 @@
+export default {
+  data () {
+    return {
+      touchPrevious: {}
+    }
+  },
+  methods: {
+    startTouch(event) {
+      if (event.touches.length == 1) {
+        this.touchPrevious = {x: event.touches[0].clientX, y: event.touches[0].clientY}
+      }
+      if (event.touches.length == 2) {
+        let midX = (event.touches.item(0).clientX + event.touches.item(1).clientX) / 2
+        let midY = (event.touches.item(0).clientY + event.touches.item(1).clientY) / 2
+        this.touchPrevious = {distance: this.touchDistance(event.touches), x: midX, y: midY}
+      }
+    },
+    endTouch(event) {
+      if (event.touches.length == 1) {
+        this.touchPrevious = {x: event.touches[0].clientX, y: event.touches[0].clientY}
+      } else {
+        //this.debugInfo = null
+      }
+    },
+    moveTouch(event) {
+      switch (event.touches.length) {
+        case 1:
+          console.log(event)
+          this.canvasOffset.x += event.touches[0].clientX - this.touchPrevious.x
+          this.canvasOffset.y += event.touches[0].clientY - this.touchPrevious.y
+          this.touchPrevious = {x: event.touches[0].clientX, y: event.touches[0].clientY}
+          break;
+        case 2:
+          let newDistance = this.touchDistance(event.touches)
+          let midX = (event.touches.item(0).clientX + event.touches.item(1).clientX) / 2
+          let midY = (event.touches.item(0).clientY + event.touches.item(1).clientY) / 2
+          let scale = newDistance / this.touchPrevious.distance
+          let scaleChange = this.canvasZoom * (scale - 1)
+          this.canvasZoom *= scale
+          this.canvasOffset.x += -((midX - 16) * scaleChange) + (midX - this.touchPrevious.x)
+          this.canvasOffset.y += -((midY - 96) * scaleChange) + (midY - this.touchPrevious.y)
+          this.touchPrevious = {distance: newDistance, x: midX, y: midY}
+          break;
+      }
+      this.selectChip("redraw")
+    },
+    touchDistance(touches) {
+      let touch1 = touches.item(0)
+      let touch2 = touches.item(1)
+      return Math.sqrt((touch1.clientX - touch2.clientX) ** 2 + (touch1.clientY - touch2.clientY) ** 2)
+    }
+  }
+}