Оптимизация рисования линий на станке для мобильных устройств

Я пытаюсь создать простое приложение, в котором пользователь может рисовать линии, перетаскивая мышь или используя жесты на экране своего сенсорного устройства.

На моем настольном компьютере это прекрасно, но на моем телефоне это очень медленно и рывками. Дело не в том, что производительность со временем ухудшается, это сразу заметно.

Я использую станки, и я расширил форму. При движениях мыши он записывает точки, а по тикам рисует их. Для параметра autoClear сцены установлено значение false, и графический объект очищается перед отрисовкой, поэтому он не перерисовывает ничего из предыдущего тика.

(function (window) {
    function LineDrawer() {
        this.initialize();
    }
    //Inheritance from Container
    LineDrawer.prototype = new createjs.Shape();
    LineDrawer.prototype.Shape_initialize = LineDrawer.prototype.initialize;
    LineDrawer.prototype.Shape_tick = LineDrawer.prototype._tick;

    LineDrawer.prototype.initialize = function () {
        //call to initialize() method from parent class 
        this.Shape_initialize();

        this.points = [];
        this.mouseMoveEventListener = $.proxy(this.onMouseMove, this);
    }
    LineDrawer.prototype._tick = function (e) {
        //call to _tick method from parent class 
        this.Shape_tick();

        var points = this.points;
        if (points.length > 0) {
            var graphics = this.graphics.clear()
                                .setStrokeStyle(3, 'round', 'round')
                                .beginStroke("#000000")
                                .moveTo(points[0].x, points[0].y)

            var pt;                
            for (var i = 1; i < points.length; i = i + 1) {
                pt = points[i];
                graphics.lineTo(pt.x, pt.y);
            }

            points.length = 0;
            if (typeof pt !== 'undefined') {
                points.push(new createjs.Point(pt.x, pt.y));
            }
        }
    }

    LineDrawer.prototype.onMouseDown = function (e) {
        this.points.push(new createjs.Point(e.stageX, e.stageY));
        this.parent.addEventListener("stagemousemove", this.mouseMoveEventListener);
    }

    LineDrawer.prototype.onMouseMove = function (e) {
        this.points.push(new createjs.Point(e.stageX, e.stageY));
    }

    LineDrawer.prototype.onMouseUp = function (e) {
        this.points.push(new createjs.Point(e.stageX, e.stageY));
        this.parent.removeEventListener("stagemousemove", this.mouseMoveEventListener);
    }

    window.LineDrawer = LineDrawer;
}(window));

Вот код для настройки сцены:

var stage,
    lineDrawer;

$(document).ready(function () {
    lineDrawer = new LineDrawer();

    var $canvas = $('#canvasMain');

    stage = new createjs.Stage($canvas[0]);
    createjs.Touch.enable(stage);
    stage.addChild(lineDrawer);
    stage.autoClear = false;

    stage.addEventListener("stagemousedown", $.proxy(lineDrawer.onMouseDown, lineDrawer));
    stage.addEventListener("stagemouseup", $.proxy(lineDrawer.onMouseUp, lineDrawer));

    createjs.Ticker.timingMode = createjs.Ticker.RAF;
    createjs.Ticker.addEventListener("tick", stage);
})

Вот скрипка для всего. Дополнительная информация: я использую jquery-1.8.3 и полифил RAF, это мои характеристики телефона< /а>. Я также попросил кого-то попробовать с гораздо лучшим телефоном Samsung с теми же результатами.