signature doesn't draw directly under cursor

[LJ-03]

When I draw a signature, it's offset downward and to the right of where the cursor is.

So like,

	x <-- cursor
signature --> o
_

[louisjpbacon]

I have the same issue...

[koos]

I have the same issue. Any update on this?

[koos]

I recognised a pattern: the more the cursor is moved on the x-axis or y-axis, the more the offset is.

https://user-images.githubusercontent.com/8343/209366645-d4b31097-c9d7-4a9a-b3ac-2ef78f958e20.mov

[koos]

Figured out, that if you're define the width of the canvas, everything works fine. e.g.:

canvas {
    display: block;
    margin: 0 auto;
    border: 1px solid #000;
    width: 70%;
}

[HannesBenson]

Sadly @koos suggestion did not work for me. I had to update the scale in the resizeCanvas function:

This didn't work:

     function resizeCanvas() {
       var ratio =  Math.max(window.devicePixelRatio || 1, 1);
       canvas.width = 500;
       canvas.height = 300;
       canvas.getContext("2d").scale(ratio, ratio);
       signaturePad.clear();
     }

Updating it to:

     function resizeCanvas() {
       canvas.width = 500;
       canvas.height = 300;
       canvas.getContext("2d").scale(1, 1)
       signaturePad.clear();
     }

fixed my problem.

[doconnor-clintel]

Bear in mind, the vendored version of signature_pad is approximately ~5 years outdated by this point.

https://github.com/szimek/signature_pad/releases?page=3