Медленные сенсорные события Javascript на Android

Я пытаюсь написать простое приложение для рисования на основе html (отдельный упрощенный код прилагается ниже). Я тестировал это на следующих устройствах:

• iPad 1 и 2: отлично работает
• ASUS T101 под управлением Windows: отлично работает
• Samsung Galaxy Tab: очень медленно и с ошибками -- непригодный.
• Lenovo IdeaPad K1: Чрезвычайно медленный и неоднородный — непригодный для использования.
• Asus Transformer Prime: заметное отставание по сравнению с iPad — близко к полезному.

Планшет Asus работает под управлением ICS, другие планшеты с Android работают под управлением 3.1 и 3.2. Я тестировал с помощью стандартного браузера Android. Я также пробовал бета-версию Android Chrome, но это было еще хуже.

Вот видео, демонстрирующее проблему: http://www.youtube.com/watch?v=Wlh94FBNVEQ

Мой вопрос: почему планшеты Android работают так медленно? Я делаю что-то не так, или это унаследованная проблема с ОС Android или браузером, или я могу что-то сделать с этим в своем коде?

multi.html:

multi.js:

var CanvasDrawr = function(options) {
  // grab canvas element
  var canvas = document.getElementById(options.id),
  ctxt = canvas.getContext("2d");

canvas.style.width = '100%'
  canvas.width = canvas.offsetWidth;
  canvas.style.width = '';

  // set props from options, but the defaults are for the cool kids
  ctxt.lineWidth = options.size || Math.ceil(Math.random() * 35);
  ctxt.lineCap = options.lineCap || "round";
  ctxt.pX = undefined;
  ctxt.pY = undefined;

  var lines = [,,];
  var offset = $(canvas).offset();

  var eventCount = 0;

  var self = {
    // Bind click events
    init: function() {
      // Set pX and pY from first click
      canvas.addEventListener('touchstart', self.preDraw, false);
      canvas.addEventListener('touchmove', self.draw, false);
    },

    preDraw: function(event) {
      $.each(event.touches, function(i, touch) {

        var id = touch.identifier;

        lines[id] = { x     : this.pageX - offset.left,
                      y     : this.pageY - offset.top,
                      color : 'black'
                    };
      });

      event.preventDefault();
    },

    draw: function(event) {
      var e = event, hmm = {};

      eventCount += 1;
      $.each(event.touches, function(i, touch) {
        var id = touch.identifier,
        moveX = this.pageX - offset.left - lines[id].x,
        moveY = this.pageY - offset.top - lines[id].y;

        var ret = self.move(id, moveX, moveY);
        lines[id].x = ret.x;
        lines[id].y = ret.y;
      });

      event.preventDefault();
    },

    move: function(i, changeX, changeY) {
      ctxt.strokeStyle = lines[i].color;
      ctxt.beginPath();
      ctxt.moveTo(lines[i].x, lines[i].y);

      ctxt.lineTo(lines[i].x + changeX, lines[i].y + changeY);
      ctxt.stroke();
      ctxt.closePath();

      return { x: lines[i].x + changeX, y: lines[i].y + changeY };
    },
  };

  return self.init();
};


$(function(){
  var drawr = new CanvasDrawr({ id: "draw", size: 5 });
});