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