Forum Discussion

John_Reddinger's avatar
John_Reddinger
Community Member
5 days ago

Signature box - not working?

I've used Copilot to create a signature box interaction. The signature isn't actually stored anywhere -- it's just a way to emphasize importance to the user -- however when you sign and click "Finish...
John_Reddinger's avatar
John_Reddinger
Community Member
5 days ago

UPDATE: Looks like this is fixed! Copilot's explanation:

Your JavaScript code is trying to use the canvas variable before it has been defined or initialized. You can fix this by wrapping your JavaScript code in a DOMContentLoaded event listener, which ensures the DOM is fully loaded before your script runs.

Fixed code below.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Signature Box</title>
  <style>

body, html {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
}

button {
  cursor: pointer;
}


#signature-pad {
  width: 500px;
  height: 200px;
}

.wrapper {
  text-align: center;
}

    #signature-pad {
      border: 2px solid #ccc;
      border-radius: 4px;
      width: 100%;
      max-width: 500px;
      height: 200px;
      touch-action: none;
      cursor: crosshair;
    }
    #instructions {
      font-size: 0.9em;
      color: #ccc;
      margin-top: 5px;
    }
    #buttons {
      margin-top: 10px;
    }
    button {
        margin-right: 10px;
        padding: 8px 16px;
        background-color: blue;
        text-transform: uppercase;
    }
    
#submit-btn.submitted {
  background-color: green;
  color: white;
}

  </style>
</head>
<body>
<div id="wrapper">
  <canvas id="signature-pad"></canvas>
  <div id="instructions">Use your mouse or finger to add your signature. Then, click "Finish."</div>
  <div id="buttons">
    <button id="reset-btn">Reset</button>
    <button id="submit-btn" disabled>Finish</button>
  </div>
</div>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const canvas = document.getElementById('signature-pad');
    const ctx = canvas.getContext('2d');
    const resetBtn = document.getElementById('reset-btn');
    const submitBtn = document.getElementById('submit-btn');

    let drawing = false;
    let hasDrawn = false;

    function resizeCanvas() {
      canvas.width = canvas.offsetWidth;
      canvas.height = canvas.offsetHeight;
    }
    resizeCanvas();

    function startDrawing(e) {
      drawing = true;
      ctx.beginPath();
      ctx.moveTo(getX(e), getY(e));
    }

    function draw(e) {
      if (!drawing) return;
      ctx.lineTo(getX(e), getY(e));
      ctx.stroke();
      hasDrawn = true;
      submitBtn.disabled = false;
    }

    function stopDrawing() {
      drawing = false;
    }

    function getX(e) {
      return (e.clientX || e.touches[0].clientX) - canvas.getBoundingClientRect().left;
    }

    function getY(e) {
      return (e.clientY || e.touches[0].clientY) - canvas.getBoundingClientRect().top;
    }

    canvas.addEventListener('mousedown', startDrawing);
    canvas.addEventListener('mousemove', draw);
    canvas.addEventListener('mouseup', stopDrawing);
    canvas.addEventListener('mouseout', stopDrawing);

    canvas.addEventListener('touchstart', startDrawing, { passive: false });
    canvas.addEventListener('touchmove', draw, { passive: false });
    canvas.addEventListener('touchend', stopDrawing);


resetBtn.addEventListener('click', () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  hasDrawn = false;
  submitBtn.disabled = true;
  localStorage.setItem('interactionComplete', 'false');
  canvas.style.pointerEvents = 'auto';
  submitBtn.classList.remove('submitted');
});



submitBtn.addEventListener('click', () => {
  canvas.style.pointerEvents = 'none';
  localStorage.setItem('interactionComplete', 'true');
  submitBtn.classList.add('submitted');
});

  });
</script>

</body>
</html>