Convert screen coordinates into canvas coordinates when dealing with mouse events

diff --git a/src/core/core.helpers.js b/src/core/core.helpers.js
index ab58b0789dc7b1bb7567447402318da639292370..bd18fd08d9da0f37e8132ee81fbf6ecaae2b4558 100644 (file)
--- a/src/core/core.helpers.js
+++ b/src/core/core.helpers.js
@@ -642,14 +642,20 @@
                                boundingRect = canvas.getBoundingClientRect();
 
                        if (e.touches) {
-                               mouseX = e.touches[0].clientX - boundingRect.left;
-                               mouseY = e.touches[0].clientY - boundingRect.top;
+                               mouseX = e.touches[0].clientX;
+                               mouseY = e.touches[0].clientY;
 
                        } else {
-                               mouseX = e.clientX - boundingRect.left;
-                               mouseY = e.clientY - boundingRect.top;
+                               mouseX = e.clientX;
+                               mouseY = e.clientY;
                        }
 
+                       // Scale mouse coordinates into canvas coordinates
+                       // by following the pattern laid out by 'jerryj' in the comments of 
+                       // http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/
+                       mouseX = Math.round((mouseX - boundingRect.left) / (boundingRect.right - boundingRect.left) * canvas.width);
+                       mouseY = Math.round((mouseY - boundingRect.top) / (boundingRect.bottom - boundingRect.top) * canvas.height);
+
                        return {
                                x: mouseX,
                                y: mouseY