missing circles with fast signing speed

[opa-rudi]

I found out that there are single circles (when signing dots) missing sometimes especially when using higher signing speed and slower processors (smartphones). Is there a workaround?

[UziTech]

You could try turning off throttling https://github.com/szimek/signature_pad#options

[opa-rudi]

It is already turned off (set to 0). Can you reproduce this issue?

[UziTech]

I can't reproduce this. There is a sensitivity setting on smartphones to prevent accidental touches. My guess is that is too high for fast signatures

[opa-rudi]

I forgot to say that the signature is drawn on the canvas correctely but when exporting the svg some circles are missing. Sorry for that. You can check this also on the demo page. It also happend there (in my case).

[UziTech]

Can you provide a list of data points that it does this to? And a video of this happening could be helpful. Also provide information on what type of phone and browser it is.

[opa-rudi]

Exported svg and screenshot from canvas. You can see that 2 circles are missing in the svg. I used a Samsung A50 smartphone. On a MacBook this does not happen. Curiously it is drawn on the canvas and not in the svg. It drove me crazy last night. I will do a litte more research.

[opa-rudi]

I tried on a different smartphone and browser with the same result. So probably you can reproduce it by yourself.

[UziTech]

I have tried many times to reproduce it. It doesn't happen for me. If you could get the data points I could try debugging it.

[opa-rudi]

Did you tap very quickly to generate circles? I will export a data array for you...

[opa-rudi]

data array looks fine, but exported svg not.

[UziTech]

Can you paste the data here so I can copy it?

[opa-rudi]

I did a new one in the previous post. Here is the array for that:
[
{
"penColor": "black",
"dotSize": 0,
"minWidth": 0.5,
"maxWidth": 2.5,
"velocityFilterWeight": 0.7,
"points": [
{
"time": 1682903762076,
"x": 70.58169555664062,
"y": 49.69459533691406,
"pressure": 0.5
}
]
},
{
"penColor": "black",
"dotSize": 0,
"minWidth": 0.5,
"maxWidth": 2.5,
"velocityFilterWeight": 0.7,
"points": [
{
"time": 1682903762230,
"x": 122.27616882324219,
"y": 58.09330749511719,
"pressure": 0.5
}
]
},
{
"penColor": "black",
"dotSize": 0,
"minWidth": 0.5,
"maxWidth": 2.5,
"velocityFilterWeight": 0.7,
"points": [
{
"time": 1682903762400,
"x": 134.39480590820312,
"y": 58.76930236816406,
"pressure": 0.5
},
{
"time": 1682903762486,
"x": 159.71324157714844,
"y": 61.18104553222656,
"pressure": 0.5
}
]
},
{
"penColor": "black",
"dotSize": 0,
"minWidth": 0.5,
"maxWidth": 2.5,
"velocityFilterWeight": 0.7,
"points": [
{
"time": 1682903762552,
"x": 206.69993591308594,
"y": 68.80174255371094,
"pressure": 0.5
},
{
"time": 1682903762649,
"x": 213.41241455078125,
"y": 71.71488952636719,
"pressure": 0.5
}
]
},
{
"penColor": "black",
"dotSize": 0,
"minWidth": 0.5,
"maxWidth": 2.5,
"velocityFilterWeight": 0.7,
"points": [
{
"time": 1682903762707,
"x": 238.54481506347656,
"y": 75.45240783691406,
"pressure": 0.5
},
{
"time": 1682903762792,
"x": 245.17222595214844,
"y": 74.35498046875,
"pressure": 0.5
}
]
},
{
"penColor": "black",
"dotSize": 0,
"minWidth": 0.5,
"maxWidth": 2.5,
"velocityFilterWeight": 0.7,
"points": [
{
"time": 1682903762864,
"x": 277.57354736328125,
"y": 72.26296997070312,
"pressure": 0.5
}
]
},
{
"penColor": "black",
"dotSize": 0,
"minWidth": 0.5,
"maxWidth": 2.5,
"velocityFilterWeight": 0.7,
"points": [
{
"time": 1682903763023,
"x": 305.44012451171875,
"y": 76.86459350585938,
"pressure": 0.5
},
{
"time": 1682903763100,
"x": 311.1852111816406,
"y": 77.54058837890625,
"pressure": 0
}
]
},
{
"penColor": "black",
"dotSize": 0,
"minWidth": 0.5,
"maxWidth": 2.5,
"velocityFilterWeight": 0.7,
"points": [
{
"time": 1682903763189,
"x": 343.868408203125,
"y": 77.73008728027344,
"pressure": 0.5
}
]
},
{
"penColor": "black",
"dotSize": 0,
"minWidth": 0.5,
"maxWidth": 2.5,
"velocityFilterWeight": 0.7,
"points": [
{
"time": 1682903763345,
"x": 356.86761474609375,
"y": 77.73008728027344,
"pressure": 0.5
}
]
},
{
"penColor": "black",
"dotSize": 0,
"minWidth": 0.5,
"maxWidth": 2.5,
"velocityFilterWeight": 0.7,
"points": [
{
"time": 1682903763486,
"x": 381.2281188964844,
"y": 80.11546325683594,
"pressure": 0.5
}
]
}
]

[UziTech]

It looks like the svg is the same as loading the canvas with fromData

[UziTech]

I wonder if this isn't a bug in toSvg but a race condition when adding points.

[opa-rudi]

I do not understand. What´s a race condition? I wonder why this does not happen to you. I tried it with 2 different smartphones and a Macbook and was able to reproduce it with all devices.

[UziTech]

A race condition is when two events happen fast and the order of events gets mixed up. For example when adding two dots to the canvas signature_pad expects the events to come in as "begin dot 1", "end dot 1", "begin dot 2", "end dot 2". If the dots are added very fast the events might be able to come in as "begin dot 1", "begin dot 2", "end dot 1", "end dot 2". That would be a race condition.

Most likely I am not able to recreate it because my phone is fast enough to call the events in the right order. You said at the beginning that this seems to happen with slower processor speeds.

What we need to figure out is how to get signature_pad to do the correct thing when these events come in out of order.

[opa-rudi]

Ok, got that. That sounds plausible.