`clear` doesn't work on mobile devices

[Aetherus]

I want to reveal the whole card when 60% of it is scratched off:

$(function() {
  $('[data-role=scratch-off]').wScratchPad({
    size        : 20,          // The size of the brush/scratch.
    bg          : '/assets/score.png',  // Background (image path or hex color).
    fg          : '#6699ff',  // Foreground (image path or hex color).
    realtime    : true,       // Calculates percentage in realitime.
    cursor      : 'pointer', // Set cursor.
    scratchUp : function(e, percent) {
      if (percent > 60) this.clear();
    }
  });
});

On PC, it works as expected. But on my iPad's Chrome and Safari, it just does not clear. P.S. this.clear() is copied from the demo site.

UPDATE

The direct cause is:

Uncaught TypeError: Cannot read property 'screenX' of undefined
(anonymous function)  @ wScratchPad.js: 312

It seems that event.changedTouches is always undefined, and when the touch event type is touchend, event.originalEvent.targetTouches is a zero-length array.

I monkey patched line from 311 like this:

      if (first) {
        simulatedEvent.initMouseEvent(
          type, true, true, window, 1,
          first.screenX, first.screenY, first.clientX, first.clientY,
          false, false, false, false, 0/*left*/, null
        );
      } else {
        simulatedEvent.initMouseEvent(
          type, true, true, window, 1,
          0, 0, 0, 0,
          false, false, false, false, 0/*left*/, null
        );
      }

      event.target.dispatchEvent(simulatedEvent);

and everything works fine.

[l670529375]

Not fine, it works fine on IOS device, but do not work on Andorid device @Aetherus @websanova