Method for Detecting Drag Events in the Canvas Element on Touch Devices

I was recently asked about being able to detect a drag event within a Canvas element on a mobile device. By default, if you try dragging on a web page with a canvas element, the entire page will shift and the touch input is lost.

This behavior can be overridden to allow capture of drag events. The basic strategy is to disable the touch events and capture them, and then respond to them manually.

Because the method to capture the touch input uses general Webkit directives, this solution will work on both iOS and Android devices.

You may view the example on your mobile device here.

References:

"Touching and Gesturing on the iPhone"

"Canvas Tutorial"