canvas可以完美地在桌面上工作，但不能在移动设备上工作

Question

我有画布功能，这些功能在台式机上非常好，但在移动设备上，它确实很奇怪或不起作用。

在移动设备上，该功能每20号有效一次，而当您触摸手指的开始50像素时，只会画出一条线。

这是我的代码：

var canvasDiv = document.getElementById('canvasDiv');
var canvas = document.createElement('canvas');
canvas.setAttribute('id', 'canvas');
canvasDiv.appendChild(canvas);
$("#canvas").attr('height', $("#canvasDiv").outerHeight());
$("#canvas").attr('width', $("#canvasDiv").width());
if (typeof G_vmlCanvasManager != 'undefined') {
    canvas = G_vmlCanvasManager.initElement(canvas);
}

context = canvas.getContext("2d");
var blueprint_background = new Image();
blueprint_background.src = srctesting;
blueprint_background.crossOrigin="anonymous";
blueprint_background.onload = function(){
    var pattern = context.createPattern(this, "no-repeat");
    context.fillStyle = pattern;
    context.rect(0,0,$("#canvasDiv").width(),$("#canvasDiv").outerHeight());
    context.fill();
};

// console.log(blueprint_background)
$('#canvas').mousedown(function(e) {
    var offset = $(this).offset()
    var mouseX = e.pageX - this.offsetLeft;
    var mouseY = e.pageY - this.offsetTop;

    paint = true;
    addClick(e.pageX - offset.left, e.pageY - offset.top);
    redraw();
});

$('#canvas').mousemove(function(e) {
    if (paint) {
        var offset = $(this).offset()
        //addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
        addClick(e.pageX - offset.left, e.pageY - offset.top, true);
        // console.log(e.pageX, offset.left, e.pageY, offset.top);
        redraw();
    }
});

$('#canvas').mouseup(function(e) {
    paint = false;
});

$('#canvas').mouseleave(function(e) {
    paint = false;
});

var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;

function addClick(x, y, dragging) {
    clickX.push(x);
    clickY.push(y);
    clickDrag.push(dragging);
}

$("#reset-btn").click(function() {
    context.clearRect(0, 0, window.innerWidth, window.innerWidth);
    clickX = [];
    clickY = [];
    clickDrag = [];
});

$(document).on('click', '#btn-save', function() {
    var mycanvas = document.getElementById('canvas');
    var img = mycanvas.toDataURL("image/png");
    anchor = $("#signature");
    anchor.val(img);
    $("#signatureform").submit(); 
});


var drawing = false;
var mousePos = {
    x: 0,
    y: 0
};
var lastPos = mousePos;

canvas.addEventListener("touchstart", function(e) {
    mousePos = getTouchPos(canvas, e);
    var touch = e.touches[0];
    var mouseEvent = new MouseEvent("mousedown", {
        clientX: touch.clientX,
        clientY: touch.clientY
    });
    canvas.dispatchEvent(mouseEvent);
}, false);


canvas.addEventListener("touchend", function(e) {
    var mouseEvent = new MouseEvent("mouseup", {});
    canvas.dispatchEvent(mouseEvent);
}, false);


canvas.addEventListener("touchmove", function(e) {

    var touch = e.touches[0];
    var offset = $('#canvas').offset();
    var mouseEvent = new MouseEvent("mousemove", {
        clientX: touch.clientX,
        clientY: touch.clientY
    });
    canvas.dispatchEvent(mouseEvent);
}, false);



// Get the position of a touch relative to the canvas
function getTouchPos(canvasDiv, touchEvent) {
    var rect = canvasDiv.getBoundingClientRect();
    return {
        x: touchEvent.touches[0].clientX - rect.left,
        y: touchEvent.touches[0].clientY - rect.top
    };
}


var elem = document.getElementById("canvas");

var defaultPrevent = function(e) {
    e.preventDefault();
}
elem.addEventListener("touchstart", defaultPrevent);
elem.addEventListener("touchmove", defaultPrevent);


function redraw() {
    //
    lastPos = mousePos;
    for (var i = 0; i < clickX.length; i++) {
        context.beginPath();
        if (clickDrag[i] && i) {
            context.moveTo(clickX[i - 1], clickY[i - 1]);
        } else {
            context.moveTo(clickX[i] - 1, clickY[i]);
        }
        context.lineTo(clickX[i], clickY[i]);
        context.closePath();
        context.stroke();
    }
}       

如您所见，我已经添加了移动事件。我想念什么吗？