Rendre le canvas tactile

Bonjour a tous je galère depuis quelques jours a rendre mon canvas parfaitement tactile.
Voici mon code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
    var myCanvas = {
    canvas: document.createElement('canvas')
    , context: ""
    , radius: 4
    , dragging: false
 
    , putPoint: function (e) {
        if (myCanvas.dragging) {
            context.lineTo(e.offsetX, e.offsetY);
            context.stroke();
            context.beginPath();
            context.arc(e.offsetX, e.offsetY, myCanvas.radius, 0, Math.PI * 2);
            context.fill();
            context.beginPath();
            context.moveTo(e.offsetX, e.offsetY);
        }
    }
    , style: function () {
 
        document.getElementById('canvas').appendChild(myCanvas.canvas);
        context = myCanvas.canvas.getContext('2d');
        myCanvas.canvas.style.border = "2px solid #AD92FF";
        context.lineWidth = myCanvas.radius * 2;
 
    }
    , engage: function (e) {
 
        myCanvas.dragging = true;
        myCanvas.putPoint(e);
    }
    , disengage: function () {
        myCanvas.dragging = false;
 
    }
    , mouse: function () {
        canvas.addEventListener('mousedown', myCanvas.engage);
        canvas.addEventListener('mousemove', myCanvas.putPoint);
        canvas.addEventListener('mouseup', myCanvas.disengage);
    },
    clear:function(){
        context.clearRect(0,0,300,300);
    },
touch:fonction(){
myCanvas.canvas.addEventListener('touchstart', myCanvas.engage);
myCanvas.canvas.addEventListener('touchmove', myCanvas.putPoint);
myCanvas.canvas.addEventListener('touchend', myCanvas.disengage);
},
} ;

Que me manque t il pour le rendre tactile? Merci pour votre aide.

Bonjour,
à voir la gestion tactile : Événements tactiles / Touch events.

C'est bon j'ai réussi,merci par contre j'ai juste un souci, je n'arrive pas a effacé la signature lorsque l'utilisateur annule.
Si j'utilise clear() on me dit que ce n'est pas une fonction et si j'utilise clearRect() cela me l'efface mais des que je clique sur la souris la signature réapparait.
voici mon code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
var myCanvas = {
        drawing: false
        , mousePos: {
            x: 0
            , y: 0
        }
        , radius: 2
        , canvas: document.getElementById("sig-canvas")
        , style: function () {
            ctx.strokeStyle = "#222222";
            ctx.lineWith = 2;
        }
        , lastPos: function () {
            var lastPos = myCanvas.mousePos
        }
        , mouseDown: function () {
            this.canvas.addEventListener("mousedown", function (e) {
                myCanvas.drawing = true;
                myCanvas.lastPos = myCanvas.getMousePos(myCanvas.canvas, e);
            }, false);
        }
        , mouseUp: function () {
            myCanvas.canvas.addEventListener("mouseup", function (e) {
                myCanvas.drawing = false;
            }, false);
        }
        , mouseMove: function () {
            this.canvas.addEventListener("mousemove", function (e) {
                myCanvas.mousePos = myCanvas.getMousePos(myCanvas.canvas, e);
            }, false);
        }
        , getMousePos: function (canvasDom, mouseEvent) {
            var rect = canvasDom.getBoundingClientRect();
            return {
                x: mouseEvent.clientX - rect.left
                , y: mouseEvent.clientY - rect.top
            };
        }
        , renderCanvas: function () {
            if (myCanvas.drawing) {
                ctx.lineTo(myCanvas.mousePos.x, myCanvas.mousePos.y);
                ctx.stroke();
 
                lastPos = myCanvas.mousePos;
            }
        }
        , drawLoop: function () {
            (function drawLoop() {
                requestAnimFrame(drawLoop);
                myCanvas.renderCanvas();
            })();
        }
        , getTouchPos: function (canvasDom, touchEvent) {
            var rect = canvasDom.getBoundingClientRect();
            return {
                x: touchEvent.touches[0].clientX - rect.left
                , y: touchEvent.touches[0].clientY - rect.top
            };
        }
        , touchStart: function () {
            myCanvas.canvas.addEventListener("touchstart", function (e) {
                myCanvas.mousePos = myCanvas.getTouchPos(myCanvas.canvas, e);
                var touch = e.touches[0];
                var mouseEvent = new MouseEvent("mousedown", {
                    clientX: touch.clientX
                    , clientY: touch.clientY
                });
                myCanvas.canvas.dispatchEvent(mouseEvent);
            }, false);
        }
        , touchEnd: function () {
            myCanvas.canvas.addEventListener("touchend", function (e) {
                var mouseEvent = new MouseEvent("mouseup", {});
                myCanvas.canvas.dispatchEvent(mouseEvent);
            }, false);
        }
        , touchMove: function () {
            myCanvas.canvas.addEventListener("touchmove", function (e) {
                var touch = e.touches[0];
                var mouseEvent = new MouseEvent("mousemove", {
                    clientX: touch.clientX
                    , clientY: touch.clientY
                });
                myCanvas.canvas.dispatchEvent(mouseEvent);
            }, false);
        }
        , touchS: function () {
            document.body.addEventListener("touchstart", function (e) {
                if (e.target == canvas) {
                    e.preventDefault();
                }
            }, false);
        }
        , touchE: function () {
            document.body.addEventListener("touchend", function (e) {
                if (e.target == canvas) {
                    e.preventDefault();
                }
            }, false);
        }
        , touchM: function () {
            document.body.addEventListener("touchmove", function (e) {
                if (e.target == canvas) {
                    e.preventDefault();
                }
            }, false);
        }
        , 
    }
window.requestAnimFrame = (function (callback) {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimaitonFrame || function (callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();
var ctx = myCanvas.canvas.getContext("2d");
myCanvas.mouseDown();
myCanvas.mouseUp();
myCanvas.mouseMove();
myCanvas.touchStart();
myCanvas.touchEnd();
myCanvas.touchMove();
myCanvas.drawLoop();

et mon bouton annul qui est dans un autre objet:

Code:

1
2
3
4
5
annulResevation:annul.addEventListener("click", function () {
    document.getElementById("cadre").style.display = "none";
ctx.clear();
 
})

Hors du contexte général difficile de répondre.

As tu croisé la route de signature_pad ?

Regarde aussi les Cours et tutoriels pour apprendre JavaScript

Non je vais voir cela merci.