Tracer librement sur Canvas (tactile)

**Plantula** · 29/03/2021, 18h40

Bonjour à tous,

Grande débutante en html5/javascript je me suis lancée sur le projet suivant : avoir un Canvas sur une page html, sur lequel l'utilisateur peut créer un cercle de couleur noire sur double clic, et tracer librement des formes à la souris en restant cliqué.

En bidouillant tant bien que mal et d'après un modèle trouvé sur le net (je n'ai plus la référence originale, désolée...), j'arrive à un code qui n'est probablement pas optimisé mais qui fonctionne très bien à la souris.

Le code javascript

Code JAVASCRIPT :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<script type="text/javascript">
 
    var canvas, ctx, flag = false,
        prevX = 0,
        currX = 0,
        prevY = 0,
        currY = 0,
        dot_flag = false;
 
    var x = "black";
 
    function init() {
        canvas = document.getElementById('can');
        ctx = canvas.getContext("2d");
        w = canvas.width;
        h = canvas.height;
        var fond = new Image();
        fond.src = "/storage/emulated/0/Download/image.png";
		fond.onload = function(){
        ctx.drawImage(fond,0,0);  
        }
 
        canvas.addEventListener("dblclick", cercle, false);
        canvas.addEventListener("mousemove", function (e) {
            findxy('move', e)
        }, false);
        canvas.addEventListener("mousedown", function (e) {
            findxy('down', e)
        }, false);
        canvas.addEventListener("mouseup", function (e) {
            findxy('up', e)
        }, false);
 
    }
 
    function cercle(e) {
	ctx.strokeStyle = 'black';
        ctx.beginPath();
 	ctx.lineWidth = 4;
        ctx.arc(currX, currY, 20, 0, 2 * Math.PI); 
        ctx.stroke();
        ctx.closePath();
    }
 
    function draw() {
        ctx.beginPath();
        ctx.moveTo(prevX, prevY);
        ctx.lineTo(currX, currY);
        ctx.strokeStyle = x;
        ctx.lineWidth = 4;
        ctx.stroke();
        ctx.closePath();
    }
 
    function findxy(res, e) {
        if (res == 'down') {
            prevX = currX;
            prevY = currY;
            currX = e.clientX - canvas.offsetLeft;
            currY = e.clientY - canvas.offsetTop;
 
            flag = true;
            dot_flag = true;
            if (dot_flag) {
                ctx.beginPath();
                ctx.fillStyle = x;
                ctx.fillRect(currX, currY, 2, 2);
                ctx.closePath();
                dot_flag = false;
            }
        }
 
        if (res == 'up') {
            flag = false;
        }
        if (res == 'move') {
            if (flag) {
                prevX = currX;
                prevY = currY;
                currX = e.clientX - canvas.offsetLeft;
                currY = e.clientY - canvas.offsetTop;
                draw();
            }
        }
    }
 
    </script>

Le canvas

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<canvas id="can" width="455" height="741" style="position:absolute;top:3%;left:35%;border:2px solid;"></canvas>

Si tout fonctionne bien, alors pourquoi fais-je appel à vous ?
Tout simplement car je veux ouvrir mon fichier sur Chrome sur une tablette android, et là c'est le drame.

-Le double clic fonctionne bien pour tracer un cercle
-L'image et mon css se chargent bien en local
-Le traçage au doigt ne fonctionne pas du tout !!

Quelques infos complémentaires :
-J'ai ajouté touchstart, touchmove et touchend dans mes addEventListener sans aucune amélioration.
-Au départ le double tap pour tracer un cercle ne fonctionnait pas, Chrome android faisait un zoom sur la page à la place. J'ai donc du désactiver cette fonctionnalité en ajoutant la ligne : <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' >.
-J'ai l'impression que Chrome android prend le déplacement du doigt comme un défilement de la page internet (voire d'une actualisation de la page si on est tout en haut), j'ai donc essayé de bloquer le défilement de page en CSS. Cela n'a rien résolu.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
html, body {
	margin: 0; 
	height: 100%; 
	overflow: hidden
}

-J'ai vu des mentions de e.touches[0].clientX qui remplacerait e.clientX dans la version tactile; j'ai tenté mais sans succès.

J'arrive au bout de mes compétences alors que tout cela est si proche de fonctionner mais il doit me manquer un détail quelque part !!
Merci de m'avoir lue et encore un autre merci à ceux qui s'intéresseront à mon problème