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

Technical Support
1

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

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();

3

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

4

My Comment - Yes nothing happen

5

Hi there,

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

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
image1482×1132 59.6 KB

6

Thanks after shrinking the canvas it works thanks for the help

1 Like