Second Signature pad is stretched horizontally

[egracyalny]

I have a page with two signature pads. The first one works as it should. The second one, works, but it is doubling the X component of where I'm actually drawing it. E.g. If my cursor is at X = 50, line is drawn at X = 100. If cursor is at X = 200, line is drawn at X = 400. The pads are instantiated using the same logic so I'm a bit stumped here. Even upgraded to latest version but still happening. Here is my code:

        var sigPads = new Map();

        $('canvas').each(function () {
            var id = $(this).prop('id');
            signaturePad = new SignaturePad(document.querySelector('#' + id), {
                backgroundColor: 'rgb(248,249,250)'
            });
            if ($(this).data('default')) {
                signaturePad.fromDataURL($(this).data('default'));
            }
            signaturePad.addEventListener("endStroke", () => {
                SaveAnswer(this);
            });
            sigPads.set(id, signaturePad);
        });

In the image XA and XB were roughly drawn in the same positions on their respective canvas.

Any ideas?

[egracyalny]

Nevermind... I discovered the resize block that was still expecting only one signature. New code:

function resizeCanvas() {
$('canvas').each(function () {
var id = $(this).prop('id');
var signaturePad = signaturePads.get(id);
var canvas = $(this).get(0);
if (!isNull(canvas)) {
var ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
// resizing would sometimes clobber the signature, restore image from data
if ($(this).data('default') && signaturePad != null) {
signaturePad.fromDataURL($(this).data('default'));
}
}
});
}