I have problem with the size and the thickness of the signature image when on different screen size

[oktaviannikky]

When i draw the signature in pc screen and display in the page, the size and thickness is really small, but when i drew in smaller screen(ipad and below), strangely the size and the thickness is big and bold and sometimes if i drew too below of the canvas it somehow got crop, i already put css style to constrain the max width and style, but don't seem to work:
.signature-img { max-width: 100%; /* Let the image fill up to the container width */ max-height: 150px; /* Limit the height of the image */ width: auto; /* Maintain aspect ratio */ height: auto; /* Maintain aspect ratio */ display: block; /* Remove inline gaps */ margin: 0 auto; /* Center the image */ }

this is how it looks like in ipad and smaller screen:

and this is how it looks like in screen bigger than ipad:

[UziTech]

Do you handle the DPR? https://github.com/szimek/signature_pad?tab=readme-ov-file#handling-high-dpi-screens

[oktaviannikky]

yes i did, have it right here:

function resizeCanvas() {
        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.clear();
    }
// Resize canvas when modal is shown
$("#signatureModal").on("shown.bs.modal", resizeCanvas);
$(window).on("resize", resizeCanvas);
resizeCanvas();```

[UziTech]

Do you have code we can try? Or can you reproduce it on jsfiddle.net?

[oktaviannikky]

it doesn't seem possible to either try my code or reproduce my code on jsfiddle.net, is there other ways?

[UziTech]

can you create a repo with your code and a way to run it to produce the issue?

[oktaviannikky]

i already figure out why it be like that, because when i tried to create a new page only for the signature, it works fine, it probably have issue with the bootstrap