Responsive Signature

[vanderhs]

Hi everyone.
I am having some trouble using SignaturePad in a responsive way.
SignaturePad is embedded within a website, which could be shown in a desktop browser or a mobile browser.

At the moment, resizing is handled the way it is in the demo:

function resizeCanvas() {
  var data = signaturePad.toData();
  const ratio =  Math.max(window.devicePixelRatio || 1, 1);

  canvas.width = canvas.offsetWidth * ratio;
  canvas.height = canvas.offsetHeight * ratio;
  canvas.getContext("2d").scale(ratio, ratio);

  signaturePad.fromData(data);
}

That works fine. You can resize the browser window or change orientation of the device and it works.
There is just one tiny thing I don't know how to handle.

When the signature is signed on a device in landscape mode, the signature pad is pretty wide.
After the signature is done, the device gets given back to another person, sometimes in portrait mode.
So, in portrait mode, the website gets resized, the signature is still there but the signature pad is now narrow.
So some long names get cut off at the end, because now the long name does not fit anymore in the narrow pad.
Now the other persons presses the "send" button without checking and the cut off signature gets saved as an image.

I tried to not use the above code on resize events.
The result was a scaled down and squished signature on the screen, but it was not cut off.
But if you try to continue the signature, the lines get drawn with an offset. I think they get drawn in relation to the initial size of the canvas.

Any idea how to handle this problem?

And to be honest, I am a backend developer, I have no clue about frontend JavaScript.

[vanderhs]

So. I've still no idea what i am doing, but I fiddled around a bit.

I change the createPoint-Method:

_createPoint(x, y, pressure) {
    const rect = this.canvas.getBoundingClientRect();

    const scaleX = this.canvas.width / rect.width;
    const scaleY = this.canvas.height / rect.height;

    const ratio =  Math.max(window.devicePixelRatio || 1, 1);

    const newX = (x - rect.left) * (scaleX / ratio);        
    const newY = (y - rect.top) * (scaleY / ratio);
            
    return new Point(newX, newY, pressure, new Date().getTime());
}

Now drawing within the squashed SignaturePad has no offset anymore and it draws where the cursor is.
I am pretty sure that this is not the best way to do it.

[UziTech]

It sounds like you want to resize the signature when the canvas size changes. First, that might void the signature in some countries. If that doesn't apply to your situation I think the easiest way is to scale the data points when you write them back to the canvas.

signaturePad.fromData(scaleData(data, widthRatio, heightRatio))

[vanderhs]

I see. That's a good point. Thank you very much.
I'll fiddle around a little more.

[rabol]

Where do I find the scaleData() method ?

[UziTech]

You will have to create it. You can get the data from signaturePad.toData().