signature_pad: pad not working

if i do this i get this error------- TypeError: wrapper is null signaturePad.js:2

var wrapper = document.getElementById(“signature-pad”), clearButton = wrapper.querySelector(“[data-action=clear]”), saveButton = wrapper.querySelector(“[data-action=save]”), canvas = wrapper.querySelector(“canvas”), signaturePad;

// Adjust canvas coordinate space taking into account pixel ratio, // to make it look crisp on mobile devices. // This also causes canvas to be cleared. function resizeCanvas() { var ratio = window.devicePixelRatio || 1; canvas.width = canvas.offsetWidth * ratio; canvas.height = canvas.offsetHeight * ratio; canvas.getContext(“2d”).scale(ratio, ratio); }

window.onresize = resizeCanvas; resizeCanvas();

signaturePad = new SignaturePad(canvas);

clearButton.addEventListener(“click”, function (event) { signaturePad.clear(); });

saveButton.addEventListener(“click”, function (event) { if (signaturePad.isEmpty()) { alert(“Please provide signature first.”); } else { signaturePad.toDataURL(); } }); //==================================================================== if i do this i get ----TypeError: canvas is null signaturePad.js:12

var wrapper = document.getElementById(“signature-pad”); var clearButton = document.querySelector(“[data-action=clear]”); var saveButton = document.querySelector(“[data-action=save]”); var canvas = document.querySelector(“canvas”); var signaturePad;

// Adjust canvas coordinate space taking into account pixel ratio, // to make it look crisp on mobile devices. // This also causes canvas to be cleared. function resizeCanvas() { var ratio = window.devicePixelRatio || 1; canvas.width = canvas.offsetWidth * ratio; canvas.height = canvas.offsetHeight * ratio; canvas.getContext(“2d”).scale(ratio, ratio); }

window.onresize = resizeCanvas; resizeCanvas();

signaturePad = new SignaturePad(canvas);

clearButton.addEventListener(“click”, function (event) { signaturePad.clear(); });

saveButton.addEventListener(“click”, function (event) { if (signaturePad.isEmpty()) { alert(“Please provide signature first.”); } else { signaturePad.toDataURL(); } });

//====================================================== here is my html and i have the <script type="text/javascript" src="…/scripts/signature_pad.js"></script> file included

<div id="signature-pad" class="m-signature-pad"> <div class="m-signature-pad--body"> <canvas></canvas> </div>

<div class="m-signature-pad--footer">
  <div class="description">Sign above</div>
  <button class="button clear" data-action="clear">Clear</button>
  <button class="button save" data-action="save">Save</button>
</div>

</div>