javascript - Canvas 似乎可以工作，但是当我在上面绘图时不显示

Question

我把它放在网上: http://agency3w.com/carteLocationVelos/

如果我查看 map ，然后单击图钉，我可以看到相关信息。 如果我填写“Nom”“Prénom”并按“预订”

我的 Canvas 正在展示!问题是，当我在上面画画时，我看不到我在画什么，但它似乎有效，因为我可以验证。有小费吗？我认为这是 CSS 某处的问题

这是我的 Canvas 代码

const Canvas = {
isDrawing : false, //  Lorsque true, le déplacement de la souris 
dessine sur la toile
draw : false, // lorsque true, on peux valider la signature 
x : 0,
y : 0,
bonDeReservationElt : document.getElementById('bonDeReservation'),
reservationElt : document.getElementById('reservation'),
InformationElt : document.getElementById('Information'),
canvas : document.getElementById('mon-canvas'),
context : document.getElementById('mon-canvas').getContext('2d'),
rect : document.getElementById('mon-canvas').getBoundingClientRect(), // 
renvoie la taille d'un élément et sa position relative par rapport à la 
zone d'affichage (viewport).

debut(e) {
this.x = e.clientX - this.rect.left;
this.y = e.clientY - this.rect.top;
this.draw = false;
this.isDrawing = true;
},
bouger(e) {
if (this.isDrawing === true) {
    this.drawLine(this.context, this.x, this.y, e.clientX - 
this.rect.left, e.clientY - this.rect.top);
    this.x = e.clientX - this.rect.left;
    this.y = e.clientY - this.rect.top;
    this.draw = true;
}
},
terminer(e) {
if (this.isDrawing === true) {
    this.drawLine(this.context, this.x, this.y, e.clientX - this.rect.left, e.clientY - this.rect.top);
    this.x = 0;
    this.y = 0;
    this.isDrawing = false;
}
},
drawLine(context, x1, y1, x2, y2) {
this.context.beginPath(); //On démarre un nouveau tracé
this.context.moveTo(x1, y1);  //On se déplace au coin x1 y1
this.context.strokeStyle = 'black';
this.context.lineWidth = 3;
this.context.lineTo(x2, y2); // on trace une ligne jusqu'aux coordonnées 
 x2, y2
this.context.stroke(); //On trace seulement les lignes.
this.context.closePath(); 
},
 effacer () {
this.context.clearRect(0,0,this.canvas.width,this.canvas.height);
this.draw = false;
},
valider () {
var nom = localStorage.getItem("nomClient");
    var prenom = localStorage.getItem("prenomClient");
    var station = sessionStorage.getItem('stationClient');
if (this.draw === true) {
    this.reservationElt.style.display = "none";
    this.bonDeReservationElt.style.display = "block";
    document.getElementById('nomPrenom').textContent = nom +" "+ 
    prenom ;
    document.getElementById('nomStationReserver').textContent = 
   station ;
        this.InformationElt.style.display = "none";
}
  }
 }

  document.getElementById('mon-canvas').addEventListener('mousedown', e => 
  Canvas.debut(e));
  document.getElementById('mon-canvas').addEventListener('mousemove', e => 
  Canvas.bouger(e));
  document.getElementById('mon-canvas').addEventListener('mouseup', e => 
  Canvas.terminer(e));
  document.querySelector('.boutonAnnuler').addEventListener('click', () => 
  Canvas.effacer());
  document.querySelector('.boutonValider').addEventListener('click', () => 
  Canvas.valider());

这里是css

#mon-canvas {
     width: 330px;
     height:150px;
     background-color: white;
     border: 3px solid black;
     margin: 30px;
  /*   display: block !important;*/
     }
    #canvasbutton
    {
      display: flex;
    }
   #canvasAndBon
    {
     margin-top: 100px;
     margin-bottom: 50px;
     justify-content: space-around;
     z-index: 5;
     background-color: rgb(245,245,245);  
}

预期的结果是在我的 Canvas 上看到绘制的签名

Answer 1

替换

if (this.isDrawing === true) {
    this.drawLine(this.context, this.x, this.y, e.clientX - t this.rect.left, e.clientY - this.rect.top);
    this.x = 0;
    this.y = 0;
    this.isDrawing = false;
}

与

if (this.isDrawing === true) {
    this.drawLine(this.context, this.x, this.y, e.clientX - this.rect.left, e.clientY - this.rect.top);
    this.x = 0;
    this.y = 0;
    this.isDrawing = false;
}

https://codepen.io/benrom/pen/LYPGKOy