diff --git a/src/components/drawing_canvas/drawingCanvas.vue b/src/components/drawing_canvas/drawingCanvas.vue
index 965208aa..db6d758f 100644
--- a/src/components/drawing_canvas/drawingCanvas.vue
+++ b/src/components/drawing_canvas/drawingCanvas.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="drawbox" v-if="visible">
-        <canvas width="320" height="320" class="drawCanvas" ref="drawCanvas" @mousedown="startDrawing" @mousemove="draw" @mouseup="stopDrawing" @mouseleave="stopDrawing"></canvas>
+        <canvas width="320" height="320" class="drawCanvas" ref="drawCanvas" @touchstart="startDrawing" @touchmove="draw" @touchend="stopDrawing" @touchcancel="stopDrawing" @mousedown="startDrawing" @mousemove="draw" @mouseup="stopDrawing" @mouseleave="stopDrawing"></canvas>
         <div class="toolbar">
             <input type="color" id="brushColour" v-model="colour"/>
             <input type="range" id="brushSize" min="1" max="20" v-model="brushSize"/>
@@ -28,17 +28,22 @@
         },
         methods: {
             startDrawing(event) {
-                this.drawing = true;
                 const canvas = this.$refs.drawCanvas;
                 const ctx = canvas.getContext('2d');
 
+                this.drawing = true;
+                event.preventDefault();
                 ctx.lineJoin = 'round';
                 ctx.lineCap = 'round';
+                ctx.lineWidth = this.brushSize;
+                ctx.strokeStyle = this.colour;
+
                 ctx.beginPath();
-                ctx.moveTo(event.offsetX, event.offsetY);
+                const { x, y } = this.inputPos(event);
+                ctx.moveTo(x, y);
                 
                 this.currentLine = {
-                    points: [{ x: event.offsetX, y: event.offsetY }],
+                    points: [{ x, y }],
                     colour: this.colour,
                     brushSize: this.brushSize
                 };
@@ -47,12 +52,12 @@
                 if (!this.drawing) return;
                 const canvas = this.$refs.drawCanvas;
                 const ctx = canvas.getContext('2d');
+                event.preventDefault();
                 
-                ctx.lineWidth = this.brushSize;
-                ctx.strokeStyle = this.colour;
-                ctx.lineTo(event.offsetX, event.offsetY);
+                const { x, y } = this.inputPos(event);
+                ctx.lineTo(x, y);
                 ctx.stroke();
-                this.currentLine.points.push({ x: event.offsetX, y: event.offsetY });
+                this.currentLine.points.push({ x, y });
             },
             stopDrawing() {
                 if (!this.drawing) return;
@@ -93,7 +98,21 @@
                 const canvas = this.$refs.drawCanvas;
                 const dataURL = canvas.toDataURL('image/png');
                 this.$emit('postDrawing', dataURL);
-            }
+            },
+            inputPos(event) {
+                const canvas = this.$refs.drawCanvas;
+                let x, y;
+                if (event.touches) {
+                    const touch = event.touches[0];
+                    const rect = canvas.getBoundingClientRect();
+                    x = touch.clientX - rect.left;
+                    y = touch.clientY - rect.top;
+                } else {
+                    x = event.offsetX;
+                    y = event.offsetY;
+                }
+                return { x, y };
+            },
         }
     };
 </script>