CODEWITHSUNDEEP
jqueryipadmobile-safarihtml5-canvas
Chris Wheaton
Chris Wheaton

Reputation: 261

HTML5 Canvas touch event offset on Ipad or mobile safari browser

I have a problem I have not been able to Google my way out of and this is my first post on stackoverlow. I have two canvas elements stacked on top of each other, to create a lottery type scratcher feature on my companies website. The problem is that on the Ipad if I scroll down the page even a pixel the touch positions are off equal to the height of the scroll. I have tried several different routes to try to fix this offset problem to no avail.

JS libraries used: Jquery1.6.4 and kinetic2d1.0.2 http://www.kineticjs.com/ for the mobile touch event detection.

I have not worked with safari mobile very much, so I figure there is some property or method to determine the offset that I am not aware of.

I would like a JS solution to this problem, but any hack that gets me to the finish line wins.

Thanks in advance.

Upvotes: 2

Views: 7544

Answers (3)

HarrisonJackson
HarrisonJackson

Reputation: 372

use this to function wrap up your touch coordinates - add a touchmove listener to this function

function touchMove_event(event){
    var canvas = document.getElementById("yourCanvas");
    var coors = {
      x: event.targetTouches[0].pageX - canvas.clientLeft,
      y: event.targetTouches[0].pageY- canvas.clientTop
    };
    touchHandler(coors);
}

then pass that to whatever function you have currently handling the touch events - use coord.x and coord.y

Upvotes: 2

Chris Wheaton
Chris Wheaton

Reputation: 261

I found that by loading the canvas in an iframe the offset issue became mute. So regardless of the scroll, orientation, gravity of the moon the scratcher works.

You can see the live version via the web, ipad or smartphone at Front Flip. Download the app too. It rocks!

Upvotes: 1

debagel
debagel

Reputation: 61

Don't have an iPad here to test it but have you looked at jQuery Offset? You can use it to get the coordinates of your canvas element relative to to the browser window and then compensate for that in your calculations like so:

offset = $('#myCanvas').offset();
left = pageX - offset.left;
top = pageY - offset.top;

Upvotes: 4

Related Questions