class Canvas {
  InitThis() {
    window.requestAnimFrame = (function (callback) {
      return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimaitonFrame ||
        function (callback) {
          window.setTimeout(callback, 1000 / 60);
        };
    })();

    function getMousePos(canvasDom, mouseEvent) {
      let rect = canvasDom.getBoundingClientRect();
      return {
        x: mouseEvent.clientX - rect.left,
        y: mouseEvent.clientY - rect.top
      };
    }

    function getTouchPos(canvasDom, touchEvent) {
      let rect = canvasDom.getBoundingClientRect();
      return {
        x: touchEvent.touches[0].clientX - rect.left,
        y: touchEvent.touches[0].clientY - rect.top
      };
    }

    function renderCanvas() {
      if (drawing) {
        ctx.moveTo(lastPos.x, lastPos.y);
        ctx.lineTo(mousePos.x, mousePos.y);
        ctx.stroke();
        lastPos = mousePos;
      }
    }

    let canvas = document.getElementById('signature');
    let ctx = canvas.getContext('2d');
    ctx.strokeStyle = '#222222';
    ctx.lineWidth = 2;

    let drawing = false;
    let mousePos = {
      x: 0,
      y: 0
    };
    let lastPos = mousePos;

    canvas.addEventListener('mousedown', function (e) {
      drawing = true;
      lastPos = getMousePos(canvas, e);
    }, false);

    canvas.addEventListener('mouseup', function (e) {
      drawing = false;
    }, false);

    canvas.addEventListener('mousemove', function (e) {
      mousePos = getMousePos(canvas, e);
    }, false);

    // Gestion du tactile
    canvas.addEventListener('touchmove', function (e) {
      let touch = e.touches[0];
      let me = new MouseEvent('mousemove', {
        clientX: touch.clientX,
        clientY: touch.clientY
      });
      canvas.dispatchEvent(me);
    }, false);

    canvas.addEventListener('touchstart', function (e) {
      mousePos = getTouchPos(canvas, e);
      let touch = e.touches[0];
      let me = new MouseEvent('mousedown', {
        clientX: touch.clientX,
        clientY: touch.clientY
      });
      canvas.dispatchEvent(me);
    }, false);

    canvas.addEventListener('touchend', function (e) {
      let me = new MouseEvent('mouseup', {});
      canvas.dispatchEvent(me);
    }, false);

    // Eviter le scroll lors du touch
    document.body.addEventListener('touchstart', function (e) {
      if (e.target === canvas) {
        e.preventDefault();
      }
    }, { passive: false });
    document.body.addEventListener('touchend', function (e) {
      if (e.target === canvas) {
        e.preventDefault();
      }
    }, { passive: false });
    document.body.addEventListener('touchmove', function (e) {
      if (e.target === canvas) {
        e.preventDefault();
      }
    }, { passive: false });

    (function drawLoop() {
      requestAnimFrame(drawLoop);
      renderCanvas();
    })();

    function clearCanvas() {
      canvas.width = canvas.width;
    }

    let clearBtn = document.getElementById('clear');
    clearBtn.addEventListener('click', function (e) {
      clearCanvas();
    }, false);

  }
}