I am attempting to connect szimek's signature pad to my simple html document. I am testing out the program but cannot get it working in my atom text editor:
html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
"https://cdn.jsdelivr.net/npm/signature_pad@3.0.0-beta.3/dist/signature_pad.min.js"</script>
</head>
<h1>
Please Sign
</h1>
<div class="wrapper">
<canvas id="signature-pad" class="signature-pad" width=400 height=200></canvas>
</div>
<div>
<button id="save">Save</button>
<button id="clear">Clear</button>
</div>
<script src="script.js"></script>
</body>
</html>
script.js
var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
backgroundColor: 'rgba(255, 255, 255, 0)',
penColor: 'rgb(0, 0, 0)'
});
var saveButton = document.getElementById('save');
var cancelButton = document.getElementById('clear');
saveButton.addEventListener('click', function (event) {
var data = signaturePad.toDataURL('image/png');
// Send data to server instead...
window.open(data);
});
cancelButton.addEventListener('click', function (event) {
signaturePad.clear();
});
I have put the same code into js fiddle, and the project works fine. I am connecting through a CDN, and the error I am getting in my own project's inspection is:
script.js:1 Uncaught ReferenceError: SignaturePad is not defined
at script.js:1