diff --git a/web_app/src/components/Editor.tsx b/web_app/src/components/Editor.tsx
index 5bd4ef7..3cb2376 100644
--- a/web_app/src/components/Editor.tsx
+++ b/web_app/src/components/Editor.tsx
@@ -800,6 +800,9 @@ export default function Editor(props: EditorProps) {
               onMouseDown={onMouseDown}
               onMouseUp={onCanvasMouseUp}
               onMouseMove={onMouseDrag}
+              onTouchStart={onMouseDown}
+              onTouchEnd={onCanvasMouseUp}
+              onTouchMove={onMouseDrag}
               ref={(r) => {
                 if (r && !context) {
                   const ctx = r.getContext("2d")
diff --git a/web_app/src/lib/utils.ts b/web_app/src/lib/utils.ts
index 8a6ebb0..25ed336 100644
--- a/web_app/src/lib/utils.ts
+++ b/web_app/src/lib/utils.ts
@@ -180,8 +180,18 @@ export function downloadImage(uri: string, name: string) {
 }
 
 export function mouseXY(ev: SyntheticEvent) {
-  const mouseEvent = ev.nativeEvent as MouseEvent
-  return { x: mouseEvent.offsetX, y: mouseEvent.offsetY }
+    const mouseEvent = ev.nativeEvent as MouseEvent
+    // Handle mask drawing coordinate on mobile/tablet devices
+    if ('touches' in ev) {
+        const rect = (ev.target as HTMLCanvasElement).getBoundingClientRect();
+        const touches = ev.touches as (Touch & { target: HTMLCanvasElement })[]
+        const touch = touches[0]
+        return {
+            x: (touch.clientX - rect.x) / rect.width * touch.target.offsetWidth,
+            y: (touch.clientY - rect.y) / rect.height * touch.target.offsetHeight,
+        }
+    }
+    return {x: mouseEvent.offsetX, y: mouseEvent.offsetY}
 }
 
 export function drawLines(