From af52b6c2f140d8b871bb1da53bc22bb8497e6e25 Mon Sep 17 00:00:00 2001 From: Nadir Hussain Laskar Date: Fri, 3 Nov 2017 00:34:27 +0530 Subject: [PATCH 1/2] Added Touch Support Added support for touch to the whiteboard example. --- examples/whiteboard/public/main.js | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/examples/whiteboard/public/main.js b/examples/whiteboard/public/main.js index 808f52b223..bfa49aa70b 100644 --- a/examples/whiteboard/public/main.js +++ b/examples/whiteboard/public/main.js @@ -16,6 +16,12 @@ canvas.addEventListener('mouseup', onMouseUp, false); canvas.addEventListener('mouseout', onMouseUp, false); canvas.addEventListener('mousemove', throttle(onMouseMove, 10), false); + + //Touch support for mobile devices + canvas.addEventListener('touchstart', onMouseDown, false); + canvas.addEventListener('touchend', onMouseUp, false); + canvas.addEventListener('touchcancle', onMouseUp, false); + canvas.addEventListener('touchmove', throttle(onMouseMove, 10), false); for (var i = 0; i < colors.length; i++){ colors[i].addEventListener('click', onColorUpdate, false); @@ -51,21 +57,21 @@ function onMouseDown(e){ drawing = true; - current.x = e.clientX; - current.y = e.clientY; + current.x = e.clientX||e.touches[0].clientX; + current.y = e.clientY||e.touches[0].clientY; } function onMouseUp(e){ if (!drawing) { return; } drawing = false; - drawLine(current.x, current.y, e.clientX, e.clientY, current.color, true); + drawLine(current.x, current.y, e.clientX||e.touches[0].clientX, e.clientY||e.touches[0].clientY, current.color, true); } function onMouseMove(e){ if (!drawing) { return; } - drawLine(current.x, current.y, e.clientX, e.clientY, current.color, true); - current.x = e.clientX; - current.y = e.clientY; + drawLine(current.x, current.y, e.clientX||e.touches[0].clientX, e.clientY||e.touches[0].clientY, current.color, true); + current.x = e.clientX||e.touches[0].clientX; + current.y = e.clientY||e.touches[0].clientY; } function onColorUpdate(e){ From d95912cfdf3a79dec960d9e777db5bdc3686f701 Mon Sep 17 00:00:00 2001 From: Nadir Hussain Laskar Date: Thu, 9 Aug 2018 12:30:02 +0530 Subject: [PATCH 2/2] Fixed event name typo `touchcancle` to `touchcancel` Updated the file and fixing the typo on `touchcancel` event. --- examples/whiteboard/public/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/whiteboard/public/main.js b/examples/whiteboard/public/main.js index bfa49aa70b..03ea033469 100644 --- a/examples/whiteboard/public/main.js +++ b/examples/whiteboard/public/main.js @@ -20,7 +20,7 @@ //Touch support for mobile devices canvas.addEventListener('touchstart', onMouseDown, false); canvas.addEventListener('touchend', onMouseUp, false); - canvas.addEventListener('touchcancle', onMouseUp, false); + canvas.addEventListener('touchcancel', onMouseUp, false); canvas.addEventListener('touchmove', throttle(onMouseMove, 10), false); for (var i = 0; i < colors.length; i++){