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
1.3.2
1.3.3
1.3.4
1.3.5
1.3.6
1.4.0
1.5.1
1.5.2
1.5.3
1.6.0
1.6.0-beta.1
1.6.0-beta.2
1.6.0-beta.3
1.6.0-beta.4
1.6.0-beta.5
1.6.0-beta.6
1.6.0-beta.7
1.6.0-beta.8
1.6.0-beta.9
2.0.0
2.1.0
2.1.0-beta.1
2.1.1
2.2.0
2.2.1
2.3.0
2.3.1
2.3.2
3.0.0-beta.1
3.0.0-beta.2
3.0.0-beta.3
3.0.0-beta.4
4.0.0
4.0.1
4.0.10
4.0.2
4.0.3
4.0.4
4.0.5
4.0.6
4.0.7
4.0.8
4.0.9
4.1.0
4.1.1
4.1.2
4.1.3
4.1.4
4.1.5
4.1.6
4.1.7
4.2.0
5.0.0
5.0.0-beta.1
5.0.1
*** 5.0.2