[Résolu] TouchEvent sur canvas décallé

Salut !
Alors voila j'ai essayé de faire une signature sur un canvas, au niveau de la souris aucun problème, mais sur mobile, le canvas est décallé

Avec une image ça va etre plus claire a expliquer:
https://www.casimages.com/i/180812041458604300.png.html

et voila mon morceau de 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();

Quelqu'un sait d'ou ça pourrait venir?
Merci !

Peut-être du CSS ? Propriétés que les mobiles ne prennent pas en charge, ou élément flottant qui est dû par la taille de l'écran.

j'ai essayé sans css, et pour element flottant j'ai recuperré la resolution PC avec la simulation tactile et toujours le même probleme
et avec la souris, je peux modifier la taille de l'ecran et aucun problème

Salut

J'ai hésité à répondre, car je n'ai jamais eu l'occasion de programmer pour mobile. Mais à la lecture de votre code, il me semble que vous utilisez un système de coordonnées différent selon la cible.

Je vous suggère de réaliser un test en utilisant clientX et clientY dans les deux cas.

Extraits de la documentation MDN avec traduction Google.

Touch

The Touch.clientX read-only property returns the X coordinate of the touch point relative to the viewport, not including any scroll offset.

La propriété Touch.clientX en lecture seule renvoie la coordonnée X du point de contact par rapport à la fenêtre d'affichage, sans inclure aucun décalage de défilement.

MouseEvent offsetX

La propriété en lecture seule offsetX de l'interface MouseEvent fournit le décalage sur l'axe X du pointeur de la souris entre cet évènement et la bordure de la marge intérieure du noeud cible. Cette fonction est expérimentale !

MouseEvent.clientX : https://developer.mozilla.org/fr/docs/Web/API/MouseEvent/clientX

The clientX read-only property of the MouseEvent interface provides the horizontal coordinate within the application's client area at which the event occurred (as opposed to the coordinates within the page). For example, clicking in the top-left corner of the client area will always result in a mouse event with a clientX value of 0, regardless of whether the page is scrolled horizontally. Originally, this property was defined as a long integer. The CSSOM View Module redefined it as a double float. See the Browser compatibility section for details.

La propriété clientX en lecture seule de l'interface MouseEvent fournit les coordonnées horizontales dans la zone client de l'application à laquelle l'événement s'est produit (par opposition aux coordonnées de la page). Par exemple, en cliquant dans le coin supérieur gauche de la zone client, vous obtenez toujours un événement de souris avec une valeur clientX de 0, que la page soit défilée horizontalement ou non. A l'origine, cette propriété était définie comme un entier long. Le module d'affichage CSSOM l'a redéfini comme un double flottant. Voir la section Compatibilité du navigateur pour plus de détails.
Modifié par danielhagnoul (12 Aug 2018 - 20:48)

Est-ce que tu prends en compte la valeur du scroll ?
Si tu demandes un offset().top sur ton élément (et que tu as scrollé dans ta page), tu ne peux pas comparer cette valeur à un mouseX sans y soustraire la valeur de ton scroll.

Bonjour popotte,
Tu as encore le problème?

C'est ça ! alors c'etait bien un problème de point d'origine, ca prennait en compte le point de la fenetre et pas du canvas ^^'

Désolé d'avoir abandonné le sujet, j'ai pas mal de projet a rendre (sale habitude de faire plusieurs projets en même temps :x )