More robust calculation of touch/click position relative to canvas

[pardo-bsso]

trafficstars

Hi @bobboteck , thanks for this library.

While trying it inside a page with a complex layout, using canvas.offsetParent.offsetLeft (and Top) inside of onTouchMove() and onMouseMove() reported (correctly) the offsets for the closest positioned parent element.

However, its offsetTop was 0 but the event.pageY was something like 400 and that made the Y axis of the joystick unusable.

|-------------------------------------|
|    offsetParent with offsetTop=0    |  
|                                     |  
|                                     |
|    |---------------------------|    |  
|    |  joy div, top ~ 400       |    |  
|    |                           |    |  
|    |   ---------------------   |    |  
|    |   |   joy canvas      |   |    |  
|    |   |                   |   |    |  
|    |   |                   |   |    |  
|    |   |-------------------|   |    |  
|    |                           |    |  
|    |---------------------------|    |  
|                                     |
|-------------------------------------|

Nowadays most browsers support the clientX and clientY properties on events that report the desired value (see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/offsetX and related)

We ended up patching the methods like:

  function onMouseMove(event) 
  {
    if(pressed === 1)
    {
      movedX = event.offsetX;
      movedY = event.offsetY;
      // Delete canvas
      context.clearRect(0, 0, canvas.width, canvas.height);
      // Redraw object
      drawExternal();
      drawInternal();
    }
  }

  function onTouchMove(event)
  {
    // Prevent the browser from doing its default thing (scroll, zoom)
    event.preventDefault();
    if(pressed === 1 && event.targetTouches[0].target === canvas)
    {
      movedX = event.targetTouches[0].offsetX;
      movedY = event.targetTouches[0].offsetY;
      // Delete canvas
      context.clearRect(0, 0, canvas.width, canvas.height);
      // Redraw object
      drawExternal();
      drawInternal();
    }
  } 

and that made it work like a charm. I don't know if you had other reason for the original code but this is related to issues like #10, #11 and #12.

Thanks

[bobboteck]

Hi @pardo-bsso, thanks for your suggestion, I will try the code in the test page. I like your code that is more clean.

[bobboteck]

Hi @pardo-bsso, I have read the documentation you have indicated, but as reported in this link it is a Working Draft, so for now it is not definitive. For this reason, even if the code would be much cleaner, I don't think I will adopt this solution for the moment.

I have tried the code you suggested, and it work well in desktop browser, but it doesn't work on mobile device.

You have tested it on mobile? I tried looking for information on the documentation about offsetX properties of the Touch object (reference here), but I can't find anything.

[fbrnc]

I'm experiencing the same issue (both with mouse and touch on desktop and mobile): Unless the page is scrolled all the way to the top the joystick keeps dragging to the bottom.

Adding this line to both onTouchMove and onMouseMove right before deleting the canvas works for me:

movedY -= window.pageYOffset;