"signatureName": "OWNER",
        "note": "",
        "image": []
    }

</script>

I am passing {{signature}} in signatureCoordinates object how to pass real data

you are likely missing quotes " your code should looks like this

<script>
const signatureCoordinates = {
"questionUuid": "b21a00fc-9977-4932-a771-cddefd2f7314",
"signature": "{{signature}}"

        "signatureName": "OWNER",
        "note": "",
        "image": []
    }
</script>

for more complex values/object use the toJS helper

<script>
const signatureCoordinates = {
questionUuid: "b21a00fc-9977-4932-a771-cddefd2f7314",
signature: {{signature}}

        signatureName: "OWNER",
        note: "",
        image: []
    }

const canvas = document.getElementById('signatureCanvas');
const context = canvas.getContext('2d');
context.lineWidth = 1.5;
context.strokeStyle = 'black';

function drawSignature(signatures) {
  console.log(signatures,"signatures")
  for (const signature of signatures) {
    context.beginPath();
    context.moveTo(signature[0].x, signature[0].y);

    for (let i = 1; i < signature.length; i++) {
      context.lineTo(signature[i].x, signature[i].y);
    }

    context.stroke();
  }
}

drawSignature(signatureCoordinates.signature);

</script>

if possible try to share the template and sample data on the playground