Bonjour à tous et à toutes !

J'essaie de créer un Canvas en JS pur et en POO.
Seulement... il ne fonctionne pas haha, j'ai dû me planter quelque part..

Si quelqu'un a le temps de jeter un oeil je veux bien

Voilà le code du canvas :
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
class CanvasObjet {
  constructor(){ //Paramètres du canvas
    this.canvas = document.getElementById("canvas");
    this.ctx = this.canvas.getContext('2d');
    this.ctx.strokeStyle = '#000000';
    this.ctx.lineWidth = 3;
    this.draw = false;
    this.mousePosition = { x:0, y:0 };
    this.lastPosition = this.mousePosition;
    this.clearButton = document.getElementById("bt-clear");
    this.canvas.width = 200;
    this.canvas.height = 150;
  }
 
//Gestion des événements 
evenements(){
    //Souris
  this.canvas.addEventListener("mousedown", function(e) {
    this.draw = true;
    this.lastPosition = this.getMposition(e);
  }); 
 
  this.canvas.addEventListener("mousemove", function(e) {
    this.mousePosition = this.getMposition(e);
    this.canvasResult()
  });
 
  this.canvas.addEventListener("mouseup", function(e) {
    this.draw = false;
  });
 
 
  // Stop scrolling (touch)
  document.body.addEventListener("touchstart", function(e){
    if (e.target == this.canvas){
      e.preventDefault();
    }
  });
 
  document.body.addEventListener("touchend", function(e){
    if (e.target == this.canvas){
      e.preventDefault();
    }
  });
 
  document.body.addEventListener("touchmove", function(e){
    if (e.target == this.canvas){
      e.preventDefault();
    }
  });
 
 
    // Touchpad
  this.canvas.addEventListener("touchstart", function(e) {
    mousePosition = this.getTposition(e);
    var touch = e.touches[0];
    var mouseEvent = new MouseEvent("mousedown", {
      clientX: touch.clientX,
      clientY: touch.clientY
    });
    this.canvas.dispatchEvent(mouseEvent);
  });
 
  this.canvas.addEventListener("touchmove", function(e) {
    var touch = e.touches[0];
    var mouseEvent = new MouseEvent("mousemove", {
      clientX: touch.clientX,
      clientY: touch.clientY
    });
    this.canvas.dispatchEvent(mouseEvent);
  });
 
  this.canvas.addEventListener("touchend", function(e) {
    var mouseEvent = new MouseEvent("mouseup", {});
    this.canvas.dispatchEvent(mouseEvent);
  });
 
 
  //Effacer
  this.clearButton.addEventListener("click", function(e) {
    this.clearCanvas()
  });
}
 
// Renvoie les coordonnées de la souris 
getMposition(mouseEvent){
  if (this.draw) {
    var oRect = this.canvas.getBoundingClientRect();
    return {
      x: mouseEvent.clientX - oRect.left,
      y: mouseEvent.clientY - oRect.top
    };
  }
}
 
// Renvoie les coordonnées du pad 
getTposition(touchEvent){
  var oRect = this.canvas.getBoundingClientRect();
  return {
    x: touchEvent.touches[0].clientX - oRect.left,
    y: touchEvent.touches[0].clientY - oRect.top
  };
}
 
// Dessin du canvas
canvasResult() {
  if(this.draw){
    this.ctx.beginPath(); 
    this.ctx.moveTo(this.lastPosition.x, this.lastPosition.y);
    this.ctx.lineTo(this.mousePosition.x, this.mousePosition.y);
    this.ctx.stroke();
    this.lastPosition = this.mousePosition;
  }
};
 
// Vide le dessin du canvas
clearCanvas(){
  this.canvas.width = this.canvas.width;
    this.ctx.lineWidth = 3;
}
 
}
Voilà le HTML :
Code HTML : 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
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas</title>
   <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="jsv.js"></script>
</head>
 
  <body>
 
<h1>Canvas</h1>
<div class="mise-en-page">
  <div class="bloc-mise-en-page">
    <h2>Signer (<span id="bt-clear">nettoyer</span>)</h2>
    <canvas id="canvas"></canvas>
  </div>
</div> 
 
</body>

Et le CSS :
Code CSS : 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
#canvas{
  width:250px;
  height:150px;
  border:1px solid #000
}
#capture{ 
  border:1px solid black;
  width:200px;
  height:150px;
}
 
/* MISE EN PAGE*/
.mise-en-page{}
.bloc-mise-en-page{margin:10px;
  flex:1 0 0px;   
  min-width:500px;
}
 
body{
  font-family: Arial;
}

Merci beaucoup