Get started with signature_pad CDN

MIT licensed

Signature Pad is a library for capturing and processing electronic signatures in various formats.

Tags:
  • html5
  • canvas
  • signature

Stable version

Copied!

How to start using signature_pad CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with signature_pad CDN - cdnhub.io</title>
  <style>
    #signature-pad {
      width: 300px;
      height: 200px;
      border: 1px solid #ccc;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="signature-pad"></canvas>
  <script src="https://cdn.cdnhub.io/signature_pad/4.2.0/signature_pad.umd.min.js"></script>
  <script>
    const canvas = document.getElementById('signature-pad');
    const context = canvas.getContext('2d');
    const signaturePad = new SignaturePad(canvas, {
      backgroundColor: 'rgba(255, 255, 255, 0)',
      penColor: 'rgb(0, 0, 0)',
      minWidth: 1,
      maxWidth: 3
    });

    signaturePad.onEnd = function(event) {
      console.log('Signature captured:', signaturePad.toDataURL());
    };

    const clearButton = document.createElement('button');
    clearButton.textContent = 'Clear';
    clearButton.addEventListener('click', function() {
      signaturePad.clear();
    });
    document.body.appendChild(clearButton);

    signaturePad.onMouseDown = function() {
      signaturePad.changePenColor('rgb(0, 0, 0)');
    };
  </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions