feat: touchscreen functionality

1 files changed, 20 insertions, 4 deletions

diff --git a/index.js b/index.js
index aaaa397..cb2b1b3 100644
--- a/index.js
+++ b/index.js
@@ -13,7 +13,7 @@ let strokeColor = "skyblue"
 let drawings = [];
 ctx.strokeStyle = strokeColor;
 
-const draw = (e) => {
+const draw = (x, y) => {
     if (!isPainting) {
         return;
     }
@@ -21,10 +21,12 @@ const draw = (e) => {
     ctx.lineWidth = lineWidth;
     ctx.lineCap = 'round';
 
-    ctx.lineTo(e.pageX - canvasOffsetX, e.pageY - canvasOffsetY);
-    drawings.push({x : (e.pageX - canvasOffsetX)/canvas.width, y : (e.pageY - canvasOffsetY)/canvas.height});
+    ctx.lineTo(x - canvasOffsetX, y - canvasOffsetY);
+    drawings.push({x : (x - canvasOffsetX)/canvas.width, y : (y - canvasOffsetY)/canvas.height});
     ctx.stroke();
 }
+
+
 canvas.addEventListener('mousedown', (e) => {
     isPainting = true;
 });
@@ -36,7 +38,21 @@ canvas.addEventListener('mouseup', (e) => {
     ctx.beginPath();
 });
 
-canvas.addEventListener('mousemove', draw);
+canvas.addEventListener('mousemove', (e) => draw(e.clientX, e.clientY));
+
+canvas.addEventListener('touchstart', (e) => {
+    console.log(e);
+    isPainting = true;
+});
+
+canvas.addEventListener('touchend', (e) => {
+    isPainting = false;
+    drawings.push({x : -1, y : -1})
+    ctx.stroke();
+    ctx.beginPath();
+});
+
+canvas.addEventListener('touchmove', (e) => draw(e.targetTouches[0].clientX, e.targetTouches[0].clientY));
 
 function redrawCanvas() {
     canvas.width = window.innerWidth - canvasOffsetX * 2;