Bonjour,
 
je cherche à faire une zone tactile et j'ai donc pioché à droite à gauche pour débouché sur le code ci-dessous.  
 
Le pire c'est que ça a marché un moment, j'avais fait 3 / 4 tests sur la même page et 2 sur 4 fonctionnaient, mais en supprimant les deux mauvais, la zone tactile est devenu "morte" sur ce qui était bon. J'ai essayé de retrouver la compo rien à faire...  
 
je ne comprends pas pourquoi ce code ne fonctionne pas.  
 
est ce qu'il marche chez vous ? (je passe par un site intermédaire pour créer ma page et j'ai peur qu'il y ai un conflit avec le js)
 
merci pour vos indications, je suis perdu.
 
la source du js : https://www.zetakey.com/codesample-signature.php
 
 
  <script>
 
function signatureCapture() {
  var canvas = document.getElementById("newSignature" );
  var context = canvas.getContext("2d" );
  canvas.width = 276;
  canvas.height = 180;
  context.fillStyle = "#fff";
  context.strokeStyle = "#444";
  context.lineWidth = 1.5;
  context.lineCap = "round";
  context.fillRect(0, 0, canvas.width, canvas.height);
  var disableSave = true;
  var pixels = [];
  var cpixels = [];
  var xyLast = {};
  var xyAddLast = {};
  var calculate = false;
  {   //functions
    function remove_event_listeners() {
      canvas.removeEventListener('mousemove', on_mousemove, false);
      canvas.removeEventListener('mouseup', on_mouseup, false);
      canvas.removeEventListener('touchmove', on_mousemove, false);
      canvas.removeEventListener('touchend', on_mouseup, false);
 
      document.body.removeEventListener('mouseup', on_mouseup, false);
      document.body.removeEventListener('touchend', on_mouseup, false);
    }
 
    function get_coords(e) {
      var x, y;
 
      if (e.changedTouches && e.changedTouches[0]) {
        var offsety = canvas.offsetTop || 0;
        var offsetx = canvas.offsetLeft || 0;
 
        x = e.changedTouches[0].pageX - offsetx;
        y = e.changedTouches[0].pageY - offsety;
      } else if (e.layerX || 0 == e.layerX) {
        x = e.layerX;
        y = e.layerY;
      } else if (e.offsetX || 0 == e.offsetX) {
        x = e.offsetX;
        y = e.offsetY;
      }
 
      return {
        x : x, y : y
      };
    };
 
    function on_mousedown(e) {
      e.preventDefault();
      e.stopPropagation();
 
      canvas.addEventListener('mouseup', on_mouseup, false);
      canvas.addEventListener('mousemove', on_mousemove, false);
      canvas.addEventListener('touchend', on_mouseup, false);
      canvas.addEventListener('touchmove', on_mousemove, false);
      document.body.addEventListener('mouseup', on_mouseup, false);
      document.body.addEventListener('touchend', on_mouseup, false);
 
      empty = false;
      var xy = get_coords(e);
      context.beginPath();
      pixels.push('moveStart');
      context.moveTo(xy.x, xy.y);
      pixels.push(xy.x, xy.y);
      xyLast = xy;
    };
 
    function on_mousemove(e, finish) {
      e.preventDefault();
      e.stopPropagation();
 
      var xy = get_coords(e);
      var xyAdd = {
        x : (xyLast.x + xy.x) / 2,
        y : (xyLast.y + xy.y) / 2
      };
 
      if (calculate) {
        var xLast = (xyAddLast.x + xyLast.x + xyAdd.x) / 3;
        var yLast = (xyAddLast.y + xyLast.y + xyAdd.y) / 3;
        pixels.push(xLast, yLast);
      } else {
        calculate = true;
      }
 
      context.quadraticCurveTo(xyLast.x, xyLast.y, xyAdd.x, xyAdd.y);
      pixels.push(xyAdd.x, xyAdd.y);
      context.stroke();
      context.beginPath();
      context.moveTo(xyAdd.x, xyAdd.y);
      xyAddLast = xyAdd;
      xyLast = xy;
 
    };
 
    function on_mouseup(e) {
      remove_event_listeners();
      disableSave = false;
      context.stroke();
      pixels.push('e');
      calculate = false;
    };
  }
  canvas.addEventListener('touchstart', on_mousedown, false);
  canvas.addEventListener('mousedown', on_mousedown, false);
}
 
 
 
function signatureClear() {
  var canvas = document.getElementById("newSignature" );
  var context = canvas.getContext("2d" );
  context.clearRect(0, 0, canvas.width, canvas.height);
}
 
 
 
</script>
 
     
    <div id="canvas">
          <canvas class="roundCorners" id="newSignature"
           style="position: relative; margin: 0; padding: 0; border: 1px solid #c4caac;">
           </canvas>
    </div>
   
    <button type="button" onclick="signatureClear()">Clear signature</button>

Bonjour,
 
Comme bien souvent, c'est un appel de la fonction développée qui n'est pas effectué.
https://codepen.io/anon/pen/LvRGYa

oui exacte je viens de m'en rendre compte ce matin, je venais pour fermer le post. Merci pour ton aide .

ah super ton lien, c'est vraiment gentil de ta part.  
dernière aide : je ne trouve pas le bouton pour mettre "resolu " :s

Cela n'existe pas ici, du moins il me semble.

ok bon à l'ancienne ... j'ai changé le titre  
encore merci.