width and height of an SVG is wrong because of window.devicePixelRatio

[dnlrbz]

What is the current behavior?
When downloading a canvas with toSVG() method, its ratio is incorrect, which leads to cutting off part of the image.

What is the expected behavior?
Developer can pass devicePixelRatio to toSVG() method as paramter, in order to capture whole canvas independent of its size.
The window.devicePixelRatio on my device is 2. That is why the image is cropped. If I set it to 1 through console, the image is correct.

Which versions of SignaturePad, and which browser / device are affected by this issue? Did this work in previous versions of SignaturePad?
Signature pad: 4.1.4
Chrome 107.0.5304.110
MacBook Pro 16' 2021

Repro:

1. open attached minimal Angular project
2. npm install
3. npm run start
4. draw on canvas and press "save"
5. downloaded SVG is cropped and part of image is cut off because of wrong ratio

untitled.zip

Video with repro:

toSvg.mov

[UziTech]

See Handling high DPI screens in the readme. Your canvas width and height should take into account the devicePixelRatio.

set the canvas size with css then use the following to scale the canvas based on the screen DPI.

const ratio =  Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);

Without scaling the canvas saving the signature as png or jpg will be the wrong size.

If you really just want to change the ratio you can do:

const dpi = window.devicePixelRatio;
window.devicePixelRatio = 1;
const file = new File([this.sig?.toSVG() as string], "signature.svg", { type: "image/svg+xml" });
window.devicePixelRatio = dpi;

but I think adding a ratio parameter to toSVG() function would encourage the wrong behavior.