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.

john_hancock_bug.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