# When I import signature, Only with the draw signatures are displaying very small in fill and sign drop-down, How can draw signature big or what should I need to do for displaying it big

**URL:** <https://pdfjs.community/t/when-i-import-signature-only-with-the-draw-signatures-are-displaying-very-small-in-fill-and-sign-drop-down-how-can-draw-signature-big-or-what-should-i-need-to-do-for-displaying-it-big/3365>\
**Category:** Technical Support\
**Tags:** pdfjs-express\
**Created:** [July 30, 2024, 12:37pm UTC](https://pdfjs.community/t/when-i-import-signature-only-with-the-draw-signatures-are-displaying-very-small-in-fill-and-sign-drop-down-how-can-draw-signature-big-or-what-should-i-need-to-do-for-displaying-it-big/3365 "2024-07-30T12:37:32Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![srizvi](https://avatars.discourse-cdn.com/v4/letter/s/a8b319/32.png) [@srizvi](https://pdfjs.community/u/srizvi)\
**Post date:** [July 30, 2024, 12:37pm UTC](https://pdfjs.community/t/when-i-import-signature-only-with-the-draw-signatures-are-displaying-very-small-in-fill-and-sign-drop-down-how-can-draw-signature-big-or-what-should-i-need-to-do-for-displaying-it-big/3365/1 "2024-07-30T12:37:32Z")

</div>

**Which product are you using?**  
PDF.js Express Viewer

**PDF.js Express Version**  
8.7.2

**Detailed description of issue**  
When I get the signatures through the API and import it by importSignatures(). Draw signatures are displaying very small in fill and sign drop-down. I am just drawing the signature on canvas through the array path point. Only with the DRAW signature

**Expected behaviour**  
 ![fillndrop-issue](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/0/0be8fa0536de443b0c4ded77375811d3164d0111.png)

**Does your issue happen with every document, or just one?**  
Every time with only the draw signature

**Link to document**  
{Provide a link to the document in question if possible}

**Code snippet**  
const signatureArray = JSON.parse(  
JSON.stringify(signatures[latestAddedSignatureIndex])  
);  
const canvas = document.createElement(‘canvas’);  
canvas.width = 500;  
canvas.height = 500;  
const ctx = canvas.getContext(‘2d’);  
ctx.lineWidth = 4;  
ctx.strokeStyle = ‘black’;  
ctx.beginPath();  
for (  
let x = 0;  
x \<= signatures[latestAddedSignatureIndex].length - 1;  
x++  
) {  
ctx.moveTo(signatureArray[0].x, signatureArray[0].y);  
for (let i = 1; i \< signatureArray.length; i++) {  
ctx.lineTo(signatureArray[i].x, signatureArray[i].y);  
}  
}  
ctx.stroke();

---

<div class="post-metadata">

**Author:** ![darian.chen](https://avatars.discourse-cdn.com/v4/letter/d/3d9bf3/32.png) [@darian.chen](https://pdfjs.community/u/darian.chen)\
**Post date:** [July 30, 2024, 7:40pm UTC](https://pdfjs.community/t/when-i-import-signature-only-with-the-draw-signatures-are-displaying-very-small-in-fill-and-sign-drop-down-how-can-draw-signature-big-or-what-should-i-need-to-do-for-displaying-it-big/3365/3 "2024-07-30T19:40:45Z")

</div>

Hello Srizvi,

Thank you for contacting us.

Please provide the following additional information:

1. Are you experiencing this issue with all drawn signatures, or is it specific to certain ones?
2. Have you made any customizations to the signature tool or the dropdown UI that might affect the rendering of the signatures?
3. Could you try increasing the size of the canvas you are drawing on?

Could you also provide a more complete code snippet or sample project, so we can test this on our end?

Best Regards,  
Darian

---

<div class="post-metadata">

**Author:** ![srizvi](https://avatars.discourse-cdn.com/v4/letter/s/a8b319/32.png) [@srizvi](https://pdfjs.community/u/srizvi)\
**Post date:** [July 31, 2024, 11:22am UTC](https://pdfjs.community/t/when-i-import-signature-only-with-the-draw-signatures-are-displaying-very-small-in-fill-and-sign-drop-down-how-can-draw-signature-big-or-what-should-i-need-to-do-for-displaying-it-big/3365/4 "2024-07-31T11:22:45Z")

</div>

> [@darian.chen](#):
>
> - Are you experiencing this issue with all drawn signatures, or is it specific to certain ones?  
> **My commnets** - Yes in all drawn signature, When I get the array path point on then I draw the image on canvas to get the base64 string.
> 
> - Have you made any customizations to the signature tool or the dropdown UI that might affect the rendering of the signatures?  
> **My Comments** - No
> 
> - Could you try increasing the size of the canvas you are drawing on?

**My Comment** - Yes nothing happen

---

<div class="post-metadata">

**Author:** ![darian.chen](https://avatars.discourse-cdn.com/v4/letter/d/3d9bf3/32.png) [@darian.chen](https://pdfjs.community/u/darian.chen)\
**Post date:** [July 31, 2024, 2:43pm UTC](https://pdfjs.community/t/when-i-import-signature-only-with-the-draw-signatures-are-displaying-very-small-in-fill-and-sign-drop-down-how-can-draw-signature-big-or-what-should-i-need-to-do-for-displaying-it-big/3365/5 "2024-07-31T14:43:20Z")

</div>

Hi there,

I have tested this issue with the following code. Could you try modifying it to match your signature, Ali?

```javascript
const signatures = [
  [
    { x: 10, y: 10 },
    { x: 50, y: 50 },
  ],
];

const latestAddedSignatureIndex = signatures.length - 1;

const canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 500;

const ctx = canvas.getContext('2d');

ctx.lineWidth = 4;
ctx.strokeStyle = 'black';

ctx.beginPath();

const signatureArray = signatures[latestAddedSignatureIndex];

ctx.moveTo(signatureArray[0].x, signatureArray[0].y);

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

ctx.stroke();

const signatureDataURL = canvas.toDataURL();
const signatureTool = instance.Core.documentViewer.getTool('AnnotationCreateSignature');

signatureTool.importSignatures([signatureDataURL]);

```

The signature seems to not appear because the canvas is too large. Could you try shrinking the size of the canvas?

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/b/b99e71af9c221b88c74618541d25d7ead93e78d9.png)

---

<div class="post-metadata">

**Author:** ![srizvi](https://avatars.discourse-cdn.com/v4/letter/s/a8b319/32.png) [@srizvi](https://pdfjs.community/u/srizvi)\
**Post date:** [August 1, 2024, 2:04pm UTC](https://pdfjs.community/t/when-i-import-signature-only-with-the-draw-signatures-are-displaying-very-small-in-fill-and-sign-drop-down-how-can-draw-signature-big-or-what-should-i-need-to-do-for-displaying-it-big/3365/6 "2024-08-01T14:04:16Z")

</div>

Thanks after shrinking the canvas it works thanks for the help