Signature Pad not working

Hi Everyone! I am building a software simulation where the learner needs to use their cursor to freeform sign a field. I've looked through the articles and used CoPilot and found 2 solutions and I've tried both and neither work. I'd love it if someone could review my solutions. 

First is Javascript. I created a Hotspot for the learner to sign:

<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.1.7/dist/signature_pad.umd.min.js"></script>
<canvas id="signature-pad" width="600" height="400"></canvas>
<script>
const canvas = document.getElementById('signature-pad');
const signaturePad = new SignaturePad(canvas);
</script>
<canvas id="signature-pad" width="600" height="400"></canvas>
<script>
const canvas = document.getElementById('signature-pad');
const ctx = canvas.getContext('2d');
const signaturePad = new SignaturePad(canvas);

// Load the image
const img = new Image();
img.src = 'path/to/your/image.jpg'; // Replace with the path to your image
img.onload = () => {
// Draw the image on the canvas
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
// Initialize the signature pad after the image is drawn
signaturePad.clear(); // Clear any previous drawings
};
</script>

The other was creating a web object which I've attached.

Neither option seems to be working and I tested it in ScormCloud since it won't test properly in Preview mode in Storyline.

Help!

Thank you in advance.

Devon