// Firma 1
// Obtenenemos un intervalo regular(Tiempo) en la pamtalla
    window.requestAnimFrame = (function (callback2) {
      return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimaitonFrame ||
            function (callback2) {
              window.setTimeout(callback2, 1000/60);
              // Retrasa la ejecucion de la funcion para mejorar la experiencia
            };
    })();

    // Traemos el canvas mediante el id del elemento html
    var canvas = document.getElementById("draw-canvas");
    var ctx = canvas.getContext("2d");


    // Mandamos llamar a los Elemetos interactivos de la Interfaz HTML
    var drawText = document.getElementById("draw-dataUrl");
    var drawImage = document.getElementById("draw-image");
    var clearBtn = document.getElementById("draw-clearBtn");
    // var submitBtn = document.getElementById("draw-submitBtn");
    clearBtn.addEventListener("click", function (e) {
      // Definimos que pasa cuando el boton draw-clearBtn es pulsado
      clearCanvas();
      drawImage.setAttribute("src", "");
    }, false);
      // Definimos que pasa cuando el boton draw-submitBtn es pulsado
    // submitBtn.addEventListener("click", function (e) {
    // var dataUrl = canvas.toDataURL();
    // drawText.innerHTML = dataUrl;
    // drawImage.setAttribute("src", dataUrl);
    //  }, false);

    // Activamos MouseEvent para nuestra pagina
    var drawing = false;
    var mousePos = { x:0, y:0 };
    var lastPos = mousePos;
    canvas.addEventListener("mousedown", function (e)
    {
      /*
        Mas alla de solo llamar a una funcion, usamos function (e){...}
        para mas versatilidad cuando ocurre un evento
      */
      var tint = document.getElementById("color");
      var punta = document.getElementById("puntero");
      console.log(e);
      drawing = true;
      lastPos = getMousePos(canvas, e);
    }, false);
    canvas.addEventListener("mouseup", function (e)
    {
      drawing = false;

      var dataUrl = canvas.toDataURL();
      drawText.innerHTML = dataUrl;
      drawImage.setAttribute("src", dataUrl);

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

    // Activamos touchEvent para nuestra pagina
    canvas.addEventListener("touchstart", function (e) {
      mousePos = getTouchPos(canvas, e);
      console.log(mousePos);
      e.preventDefault(); // Prevent scrolling when touching the canvas
      var touch = e.touches[0];
      var mouseEvent = new MouseEvent("mousedown", {
        clientX: touch.clientX,
        clientY: touch.clientY
      });
      canvas.dispatchEvent(mouseEvent);
    }, false);
    canvas.addEventListener("touchend", function (e) {
      e.preventDefault(); // Prevent scrolling when touching the canvas
      var mouseEvent = new MouseEvent("mouseup", {});
      canvas.dispatchEvent(mouseEvent);
    }, false);
    canvas.addEventListener("touchleave", function (e) {
      // Realiza el mismo proceso que touchend en caso de que el dedo se deslice fuera del canvas
      e.preventDefault(); // Prevent scrolling when touching the canvas
      var mouseEvent = new MouseEvent("mouseup", {});
      canvas.dispatchEvent(mouseEvent);
    }, false);
    canvas.addEventListener("touchmove", function (e) {
      e.preventDefault(); // Prevent scrolling when touching the canvas
      var touch = e.touches[0];
      var mouseEvent = new MouseEvent("mousemove", {
        clientX: touch.clientX,
        clientY: touch.clientY
      });
      canvas.dispatchEvent(mouseEvent);
    }, false);

    // Get the position of the mouse relative to the canvas
    function getMousePos(canvasDom, mouseEvent) {
      var rect = canvasDom.getBoundingClientRect();
      /*
        Devuelve el tamaño de un elemento y su posición relativa respecto
        a la ventana de visualización (viewport).
      */
      return {
        x: mouseEvent.clientX - rect.left,
        y: mouseEvent.clientY - rect.top
      };
    }

    // Get the position of a touch relative to the canvas
    function getTouchPos(canvasDom, touchEvent) {
      var rect = canvasDom.getBoundingClientRect();
      console.log(touchEvent);
      /*
        Devuelve el tamaño de un elemento y su posición relativa respecto
        a la ventana de visualización (viewport).
      */
      return {
        x: touchEvent.touches[0].clientX - rect.left, // Popiedad de todo evento Touch
        y: touchEvent.touches[0].clientY - rect.top
      };
    }

    // Draw to the canvas
    function renderCanvas() {
      if (drawing) {
        var tint = document.getElementById("color");
        var punta = document.getElementById("puntero");
        ctx.strokeStyle = tint.value;
        ctx.beginPath();
        ctx.moveTo(lastPos.x, lastPos.y);
        ctx.lineTo(mousePos.x, mousePos.y);
        console.log(punta.value);
        ctx.lineWidth = punta.value;
        ctx.stroke();
        ctx.closePath();
        lastPos = mousePos;
      }
    }

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

    // Allow for animation
    (function drawLoop () {
      requestAnimFrame(drawLoop);
      renderCanvas();
    })();


// firma2
// Obtenenemos un intervalo regular(Tiempo) en la pamtalla
    window.requestAnimFrame = (function (callback) {
      return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimaitonFrame ||
            function (callback) {
              window.setTimeout(callback, 1000/60);
              // Retrasa la ejecucion de la funcion para mejorar la experiencia
            };
    })();

    // Traemos el canvas mediante el id del elemento html
    var canvas2 = document.getElementById("draw-canvas2");
    var ctx2 = canvas2.getContext("2d");


    // Mandamos llamar a los Elemetos interactivos de la Interfaz HTML
    var drawText2 = document.getElementById("draw-dataUrl2");
    var drawImage2 = document.getElementById("draw-image2");
    var clearBtn2 = document.getElementById("draw-clearBtn2");
    // var submitBtn2 = document.getElementById("draw-submitBtn2");
    clearBtn2.addEventListener("click", function (e) {
      // Definimos que pasa cuando el boton draw-clearBtn es pulsado
      clearCanvas2();
      drawImage2.setAttribute("src", "");
    }, false);
      // Definimos que pasa cuando el boton draw-submitBtn es pulsado
    // submitBtn2.addEventListener("click", function (e) {
    // var dataUrl2 = canvas2.toDataURL();
    // drawText2.innerHTML = dataUrl2;
    // drawImage2.setAttribute("src", dataUrl2);
    //  }, false);

    // Activamos MouseEvent para nuestra pagina
    var drawing2 = false;
    var mousePos2 = { x2:0, y2:0 };
    var lastPos2 = mousePos2;
    canvas2.addEventListener("mousedown", function (e)
    {
      /*
        Mas alla de solo llamar a una funcion, usamos function (e){...}
        para mas versatilidad cuando ocurre un evento
      */
      var tint2 = document.getElementById("color2");
      var punta2 = document.getElementById("puntero2");
      console.log(e);
      drawing2 = true;
      lastPos2 = getMousePos2(canvas2, e);
    }, false);
    canvas2.addEventListener("mouseup", function (e)
    {
      drawing2 = false;

      setTimeout(function(){
        
        var dataUrl2 = canvas2.toDataURL();
        drawText2.innerHTML = dataUrl2;
        drawImage2.setAttribute("src", dataUrl2);

      }, 2000);
      

    }, false);
    canvas2.addEventListener("mousemove", function (e)
    {
      mousePos2 = getMousePos2(canvas2, e);
    }, false);

    // Activamos touchEvent para nuestra pagina
    canvas2.addEventListener("touchstart", function (e) {
      mousePos2 = getTouchPos2(canvas2, e);
      console.log(mousePos2);
      e.preventDefault(); // Prevent scrolling when touching the canvas
      var touch2 = e.touches[0];
      var mouseEvent2 = new MouseEvent("mousedown", {
        clientX: touch2.clientX,
        clientY: touch2.clientY
      });
      canvas2.dispatchEvent(mouseEvent2);
    }, false);
    canvas2.addEventListener("touchend", function (e) {
      e.preventDefault(); // Prevent scrolling when touching the canvas
      var mouseEvent2 = new MouseEvent("mouseup", {});
      canvas2.dispatchEvent(mouseEvent2);
    }, false);
    canvas2.addEventListener("touchleave", function (e) {
      // Realiza el mismo proceso que touchend en caso de que el dedo se deslice fuera del canvas
      e.preventDefault(); // Prevent scrolling when touching the canvas
      var mouseEvent2 = new MouseEvent("mouseup", {});
      canvas2.dispatchEvent(mouseEvent2);
    }, false);
    canvas2.addEventListener("touchmove", function (e) {
      e.preventDefault(); // Prevent scrolling when touching the canvas
      var touch2 = e.touches[0];
      var mouseEvent2 = new MouseEvent("mousemove", {
        clientX: touch2.clientX,
        clientY: touch2.clientY
      });
      canvas2.dispatchEvent(mouseEvent2);
    }, false);

    // Get the position of the mouse relative to the canvas
    function getMousePos2(canvasDom2, mouseEvent2) {
      var rect2 = canvasDom2.getBoundingClientRect();
      /*
        Devuelve el tamaño de un elemento y su posición relativa respecto
        a la ventana de visualización (viewport).
      */
      return {
        x2: mouseEvent2.clientX - rect2.left,
        y2: mouseEvent2.clientY - rect2.top
      };
    }

    // Get the position of a touch relative to the canvas
    function getTouchPos2(canvasDom2, touchEvent) {
      var rect2 = canvasDom2.getBoundingClientRect();
      console.log(touchEvent);
      /*
        Devuelve el tamaño de un elemento y su posición relativa respecto
        a la ventana de visualización (viewport).
      */
      return {
        x2: touchEvent.touches[0].clientX - rect2.left, // Popiedad de todo evento Touch
        y2: touchEvent.touches[0].clientY - rect2.top
      };
    }

    // Draw to the canvas
    function renderCanvas2() {
      if (drawing2) {
        var tint2 = document.getElementById("color2");
        var punta2 = document.getElementById("puntero2");
        ctx2.strokeStyle = tint2.value;
        ctx2.beginPath();
        ctx2.moveTo(lastPos2.x2, lastPos2.y2);
        ctx2.lineTo(mousePos2.x2, mousePos2.y2);
        console.log(punta2.value);
        ctx2.lineWidth = punta2.value;
        ctx2.stroke();
        ctx2.closePath();
        lastPos2 = mousePos2;
      }
    }

    function clearCanvas2() {
      canvas2.width = canvas2.width;
    }

    // Allow for animation
    (function drawLoop2 () {
      requestAnimFrame(drawLoop2);
      renderCanvas2();
    })();