html5 canvas touch事件,javascript - HTML5 canvas touch panning/scrolling? - Stack Overflow

I'm working on my first ever HTML5 canvas project. It presents a grid, for simplicity say the size is 4x4. It must be zoomable, for time being pinch zoom is not needed, it's enough to use zoom in/out buttons. I have it working so that the first zoom in doubles the visible size to 2x2 and next one shows area of 1 square, to the user it seems that the center of the grid does not move while zooming, further zooming is not possible. So I have scale() and translate() under control.

Initial view1 2 3 4

5 6 7 8

9 10 11 12

13 14 15 16

After the first zoom

6 7

10 11

I created buttons to move the visible area fixed amount of pixels using translate(), so basically I only need to listen to correct touch event and do a bit more, right? But regardless whatever I try, I cannot figure out how to do it using touch screen (I'm developing on Android). I've seen many examples, including well known http://phrogz.net/tmp/canvas_zoom_to_cursor.html

I would appreciate if someone could point me back to the right direction?

Also, currently my "step scrolling" can go over the canvas borders, which would be the correct property to monitor to know the border is near?

I'm using pure Javascript, jQuery is used for other parts of the project. I would prefer to stick with those two, this is also a learning project for me. But if nothing else works, I can include another library.