Canvas coordenates bootstrap modal

i'm trying to create a signature canvas on a boostrap modal, but it doesn't work at chrome / safari. I've been looking at coordenates, and the problem is here. In firefox, the coordenates are correct and the signature with canvas works perfectly, but on chrome / safari, the coordenate Y doesn't work, automatically plus like 300 points.

My function of get coordenates are this:

        function get_coords(e) {
        var x, y;
        // console.log("x : "+x);
        // console.log("y : "+y);
        // console.log(e);
        if (e.changedTouches && e.changedTouches[0]) {
            console.log("0");
            var offsety = canvas.offsetTop || 0;
            var offsetx = canvas.offsetLeft || 0;
            // console.log("x : "+e.changedTouches[0].pageX);
            // console.log("y : "+e.changedTouches[0].pageY);
            x = e.changedTouches[0].pageX - offsetx;
            y = e.changedTouches[0].pageY - offsety;
        } else if (e.layerX || 0 == e.layerX) {
            console.log("1");
            x = e.layerX;
            y = e.layerY;
        } else if (e.offsetX || 0 == e.offsetX) {
            console.log("2");
            x = e.offsetX;
            y = e.offsetY;
        }
        // console.log("e : ");
        // console.log(e);
        // console.log("x : "+x);
        // console.log("y : "+y);

        return {
            x : x,
            y : y
        };
    };

My canvas always enter on the option where console.log says 1.

The Y coordenate on Chrome and Safari are always bad, probably because it gets a wrong start coordenate on Y.

Full code here:

function signatureCapture() {
    var canvas = document.getElementById("newSignature");
    var context = canvas.getContext("2d");
    canvas.width = 276;
    canvas.height = 180;
    context.fillStyle = "#fff";
    context.strokeStyle = "#444";
    context.lineWidth = 1.5;
    context.lineCap = "round";
    context.fillRect(0, 0, canvas.width, canvas.height);
    var disableSave = true;
    var pixels = [];
    var cpixels = [];
    var xyLast = {};
    var xyAddLast = {};
    var calculate = false;
    {   //functions
        function remove_event_listeners() {
            canvas.removeEventListener('mousemove', on_mousemove, false);
            canvas.removeEventListener('mouseup', on_mouseup, false);
            canvas.removeEventListener('touchmove', on_mousemove, false);
            canvas.removeEventListener('touchend', on_mouseup, false);

            document.body.removeEventListener('mouseup', on_mouseup, false);
            document.body.removeEventListener('touchend', on_mouseup, false);
        }

        function get_coords(e) {
            var x, y;
            // console.log("x : "+x);
            // console.log("y : "+y);
            // console.log(e);
            if (e.changedTouches && e.changedTouches[0]) {
                console.log("0");
                var offsety = canvas.offsetTop || 0;
                var offsetx = canvas.offsetLeft || 0;
                // console.log("x : "+e.changedTouches[0].pageX);
                // console.log("y : "+e.changedTouches[0].pageY);
                x = e.changedTouches[0].pageX - offsetx;
                y = e.changedTouches[0].pageY - offsety;
            } else if (e.layerX || 0 == e.layerX) {
                console.log("1");
                x = e.layerX;
                y = e.layerY;
            } else if (e.offsetX || 0 == e.offsetX) {
                console.log("2");
                x = e.offsetX;
                y = e.offsetY;
            }
            // console.log("e : ");
            // console.log(e);
            // console.log("x : "+x);
            // console.log("y : "+y);

            return {
                x : x,
                y : y
            };
        };

        function on_mousedown(e) {
            e.preventDefault();
            e.stopPropagation();
            // console.log("mouseDown!");

            canvas.addEventListener('mouseup', on_mouseup, false);
            canvas.addEventListener('mousemove', on_mousemove, false);
            canvas.addEventListener('touchend', on_mouseup, false);
            canvas.addEventListener('touchmove', on_mousemove, false);
            document.body.addEventListener('mouseup', on_mouseup, false);
            document.body.addEventListener('touchend', on_mouseup, false);

            empty = false;
            var xy = get_coords(e);
            context.beginPath();
            pixels.push('moveStart');
            context.moveTo(xy.x, xy.y);
            pixels.push(xy.x, xy.y);
            xyLast = xy;
        };

        function on_mousemove(e, finish) {
            e.preventDefault();
            e.stopPropagation();
            // console.log("mouseMove!");

            var xy = get_coords(e);
            // console.log("coords : ");
            // console.log(xy);
            var xyAdd = {
                x : (xyLast.x + xy.x) / 2,
                y : (xyLast.y + xy.y) / 2
            };

            if (calculate) {
                console.log("calculating");
                console.log(e);
                var xLast = (xyAddLast.x + xyLast.x + xyAdd.x) / 3;
                var yLast = (xyAddLast.y + xyLast.y + xyAdd.y) / 3;
                pixels.push(xLast, yLast);
            } else {
                calculate = true;
            }

            context.quadraticCurveTo(xyLast.x, xyLast.y, xyAdd.x, xyAdd.y);
            pixels.push(xyAdd.x, xyAdd.y);
            context.stroke();
            context.beginPath();
            context.moveTo(xyAdd.x, xyAdd.y);
            xyAddLast = xyAdd;
            xyLast = xy;
            // console.log("x : "+xyAdd.x+" y : "+xyAdd.y);

        };

        function on_mouseup(e) {
            console.log("mouseUp!");
            remove_event_listeners();
            disableSave = false;
            context.stroke();
            pixels.push('e');
            calculate = false;
        };
    }
    canvas.addEventListener('touchstart', on_mousedown, false);
    canvas.addEventListener('mousedown', on_mousedown, false);
}

function signatureSave(plantilla) {
    var canvas = document.getElementById("newSignature");// save canvas image as data url (png format by default)
    var dataURL = canvas.toDataURL("image/png");
    // console.log(dataURL);
    document.getElementById("image").value = dataURL;

    switch(plantilla) {
    case "plantilla1":
        uploadPlantilla1();
        break;
    case "plantilla2":
        uploadPlantilla2();
        break;
    case "plantilla3":
        uploadPlantilla3();
        break;
    } 

    // if (plantilla == "plantilla1"){
    //  uploadPlantilla1();
    // }

    // if (plantilla == "plantilla2"){
    //  uploadPlantilla2();
    // }

    // document.getElementById("saveSignature").src = dataURL;
    // document.getElementById("saveData").submit();
}

function signatureClear() {
    var canvas = document.getElementById("newSignature");
    var context = canvas.getContext("2d");
    context.clearRect(0, 0, canvas.width, canvas.height);
    document.getElementById("image").value = "";
    // document.getElementById("saveSignature").src = "";
}