Discussion :

[Koscielski]

Bonjour,
J'ai un soucis avec mon Canvas, quand j'écris dessus, cela me génère une erreur :

canvas.js:101 Uncaught TypeError: Cannot read property 'beginPath' of null
at Object.activationDessin (canvas.js:101)
at HTMLCanvasElement.convertTouchEvent (canvas.js:61)

En soi, cela fonctionne, mais je ne trouve pas de solution pour régler ce problème.
Merci à l'âme charitable qui m'éclairera dans ma question

Voici le code :

Code :

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
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
123
124
125
126
// Objet signature  ==>  Le canvas
var Signature = {
    // Attributs
    ecriture : false, // Attribut d'activation de l'écriture
    canvas : document.getElementById("signature"), // Sélection du canvas dans le HTML
    context : null, // Définira le contexte d'utilisation du canvas
    signatureImg : null,
 
    // Méthode qui traduit l'événement Touch en Évent pour écrans tactiles
    convertTouchEvent : function(ev) {
        var touch, ev_type, mouse_ev;
        touch = ev.targetTouches[0];
        ev.preventDefault();
        switch (ev.type) {
            case 'touchstart':
                // S'assure qu'un doigt est sur la cible
                if (ev.targetTouches.length != 1) {
                    return;
                }
                touch = ev.targetTouches[0];
                ev_type = 'mousedown';
                break;
            case 'touchmove':
                // S'assure qu'un doigt est sur la cible
                if (ev.targetTouches.length != 1) {
                    return;
                }
                touch = ev.targetTouches[0];
                ev_type = 'mousemove';
                break;
            case 'touchend':
                // Sassure que le doigt a été enlever de la cible
                if (ev.changedTouches.length != 1) {
                    return;
                }
                touch = ev.changedTouches[0];
                ev_type = 'mouseup';
                break;
            default:
                return;
        }
 
        mouse_ev = document.createEvent("MouseEvents");
        mouse_ev.initMouseEvent(
            ev_type, // Genre de l'événement
            true,
            true,
            window, // Vue de l'événement
            0, // Compte de clic de souris
            touch.screenX, // Coordonnée X de l'écran
            touch.screenY, // Coordonnée Y de l'écran
            touch.clientX, // Coordonnée X du client
            touch.clientY, // Coordonnée Y du client
            ev.ctrlKey, // Vérifie si la touche contrôle a été appuyée
            ev.altKey, // Vérifie si la touche alt a été appuyée
            ev.shiftKey, // Vérifie si la touche majuscule a été appuyée
            ev.metaKey, // Vérifie si la touche meta a été appuyée
            0, // Bouton de la souris
            null // Cible
        );
        // ERREUR ICI
        this.dispatchEvent(mouse_ev);
    },
 
    // Méthode qui récupére les coordonnées de l'Élément de pointage (souris, doigt...)
    getMousePos : function(event) {
        rect = this.canvas.getBoundingClientRect(); // Renvoie la taille d'un élément et sa position relative par rapport à la zone d'affichage
 
        return{
            x:event.clientX - rect.left,
            y:event.clientY - rect.top
        };
    },
 
    // Méthode qui détermine le déplacement de l'élément de pointage
    deplacementSouris : function(event) {
        sourisPosition = this.getMousePos(event); // Coordonnées de l'élément de pointage retourner par la méthode "getMousePos"
        positionX = sourisPosition.x;
        positionY = sourisPosition.y;
        this.dessin(positionX, positionY);
    },
 
    // Méthode qui permet de dessiner dans le canvas
    dessin : function(positionX, positionY) {
        this.context = this.canvas.getContext("2d"); // Contexte du canvas
        this.context.lineWidth = 5; // Largeur du tracer
 
        if(this.ecriture){
            this.context.lineTo(positionX, positionY); // Désigne le point d'arrivé du tracer
            this.context.stroke(); // Effectue le tracer
        }
    },
 
    // Méthode qui permet de désactiver l'écriture
    desactivationDessin : function() {
        this.ecriture = false; // Désactive l'écriture dans le canvas
    },
 
    // Méthode qui active et débute l'écriture dans le canvas
    activationDessin : function() {
        this.ecriture = true; // Active l'écriture sur le canvas
        // ERREUR ICI
        this.context.beginPath(); // Commence un nouveau chemin de dessin
        this.context.moveTo(positionX, positionY); // Désigne le début du tracer
    },
 
    // Méthode qui permet d'effacer le canvas
    clearCanvas : function() {
        this.context.clearRect(0, 0, 800, 200); // Réinitialise le canvas
    }
}
 
// Appel des méthodes sur écrans tactiles
Signature.canvas.addEventListener("touchstart", Signature.convertTouchEvent);
Signature.canvas.addEventListener("touchmove", Signature.convertTouchEvent);
Signature.canvas.addEventListener("touchend", Signature.convertTouchEvent);
 
// Appel des méthodes sur PC
Signature.canvas.addEventListener("mousedown", Signature.activationDessin.bind(Signature));
Signature.canvas.addEventListener("mousemove", Signature.deplacementSouris.bind(Signature));
Signature.canvas.addEventListener("mouseup", Signature.desactivationDessin.bind(Signature));
 
// Appel de la méthode d'effacement du canvas lors de l'appui sur le bouton "effacer"
document.getElementById("boutonEffacer").addEventListener("click", function() {
    Signature.clearCanvas();
});

[Showie]

Bonjour,

Il n'y a pas de raison que cela ne marche pas.

Je pense que ton erreur arrive car tu tente de lancer ta fonction d initialisation avant la fion du chargement du DOM.
[EDIT] : Excuse moi répondu trop vite je n'avais pas vu qu'elle se déclenchait qu'en mode tactile
L'erreur vient du fait que tu appel activationDessin avant dessin
donc tu peux initialiser ton context en amont.
Tu pourrais stocker les positionX et ~Y dans ton objet
[FIN EDIT]
Essai un truc genre window.onload=myFunction(); testable ici https://jsfiddle.net/4f2x1q7p/2/

[Koscielski]

D'accord, merci.
Je devrais donc remonter activationDessin au dessus de la méthode pour écrans tactiles ?

[NoSmoking]

Bonjour,

@Koscielski :
il serait peut être opportun que tu répondes aux messages que tu as laissés en suspend

• Automatiser un slider
• Utilisation du LocalStorage
• #1064 - Erreur de syntaxe près de 'VISIBLE) ENGINE = InnoDB' à la ligne 14

Merci d'avance.

[Koscielski]

J'ai marqué mes précédent sujet comme résolu

[Showie]

D'accord, merci.
Je devrais donc remonter activationDessin au dessus de la méthode pour écrans tactiles ?

Non, ce n'est pas la position dans ton code des fonctions qui comptent mais l'ordre dans lequel elles sont appelées !

En gros, vu que le navigateur fait appel aux fonctions en boucle, c'est juste le premier appel qui plante.

tu capte l erreur de la première fois et ton fonctionnement deviens normal.
voir exemple ci dessous.

Code :

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

1
2
3
4
5
6
7
8
9
 
activationDessin : function() {
        this.ecriture = true; // Active l'écriture sur le canvas
        // ERREUR ICI
        if (this.context != null) {
        	this.context.beginPath(); // Commence un nouveau chemin de dessin
        	this.context.moveTo(positionX, positionY); // Désigne le début du tracer
        }
    },