problème canvas décalé

Bonjour,

Voila je rencontre un petit problème avec mon code.

Je veux faire une signature avec un canvas, don j'ai créé mon objet canvas, et au niveau de la souris tout va bien, le problème, c'est avec les evenements mobiles touchevent

La signature est décalée, de 115px pour le clientX et 355px pour le clientY (décallage différent pour le clientY quand je scroll la page...)

et le probleme en image:

https://www.casimages.com/i/180812041458604300.png.html

Voila mon code

var myCanvas = {
                        drawing: false,
                        submitCanvas: document.querySelector('#submitCanvas'),
                        posiX: 0,
                        posiY: 0,
                        radius: 2,
                        canvas: document.querySelector('#canvas'),
                        ctx: document.querySelector('#canvas').getContext('2d'),
                        clearing: false,
                        style: function () {
                            myCanvas.ctx.strokeStyle = "black";
                            myCanvas.ctx.lineWith = 3;

                            myCanvas.ctx.lineCap = 'round';
                            myCanvas.ctx.lineJoin = 'round';
                        },
                        lastPos: function () {
                            var lastPos = posiX
                        },

                        mouseDown: function () {
                            this.canvas.addEventListener("mousedown", (e) => {
                                myCanvas.drawing = true;
                              [myCanvas.posiX, myCanvas.posiY] = [e.offsetX, e.offsetY];
                            });
                        },
                        mouseUp: function () {
                            myCanvas.canvas.addEventListener("mouseup", () => myCanvas.drawing = false);
                        },
                        mouseMove: function () {
                            this.canvas.addEventListener("mousemove", function (e) {
                                if (!myCanvas.drawing) {
                                    return;
                                }

                                contentSign.isSigned = true;
                                myCanvas.submitCanvas.style.color = 'white';
                                myCanvas.submitCanvas.style.backgroundColor = 'black';

                                myCanvas.ctx.strokeStyle = 'black';
                                myCanvas.ctx.lineWidth = 3;

                                myCanvas.ctx.beginPath();
                                myCanvas.ctx.moveTo(myCanvas.posiX, myCanvas.posiY);
                                myCanvas.ctx.lineTo(e.offsetX, e.offsetY);
                                myCanvas.ctx.stroke();

                                [myCanvas.posiX, myCanvas.posiY] = [e.offsetX, e.offsetY];
                            });
                        },

                        renderCanvas: function () {
                            if (myCanvas.drawing) {
                                contentSign.isSigned = true;
                                submitCanvas.style.color = 'white';
                                submitCanvas.style.backgroundColor = 'black';
                            }
                        },

                        touchStart: function () {
                            myCanvas.canvas.addEventListener("touchstart", function (e) {
                                e.preventDefault();

                                var rect = e.target.getBoundingClientRect();
                                var x = e.targetTouches[0].pageX - rect.left;
                                var y = e.targetTouches[0].pageY - rect.top;
                                var touch = e.touches[0];
                                [myCanvas.posiX, myCanvas.posiY] = [x, y];
                                var mouseEvent = new MouseEvent("mousedown", {
                                    clientX: touch.clientX,
                                    clientY: touch.clientY
                                });
                                myCanvas.canvas.dispatchEvent(mouseEvent);
                                console.log(mouseEvent.clientX, mouseEvent.clientY)
                            });

                        },

                        touchEnd: function () {
                            myCanvas.canvas.addEventListener("touchend", function (e) {
                                e.preventDefault();

                                var mouseEvent = new MouseEvent("mouseup", {});
                                myCanvas.canvas.dispatchEvent(mouseEvent);

                            });
                        },
                        touchMove: function () {
                            myCanvas.canvas.addEventListener("touchmove", function (e) {
                                e.preventDefault();

                                var touch = e.touches[0];
                                var mouseEvent = new MouseEvent("mousemove", {
                                    clientX: touch.clientX,
                                    clientY: touch.clientY
                                });
                                console.log(mouseEvent.clientX, mouseEvent.clientY)
                            });
                        }
                    }

                    myCanvas.mouseDown();
                    myCanvas.mouseUp();
                    myCanvas.mouseMove();
                    myCanvas.touchStart();
                    myCanvas.touchEnd();
                    myCanvas.touchMove();

Voila quelqu'un sait d'où pourrait venir ce problème de décalage? Merci ! ^^