The stroke color changes when writing a stroke during a highlight.

[GnitLores]

First of all, thanks for this amazing tool!
I have run into the issue that when you complete a stroke at the same time a highlight occurs, a visual bug frequently happens. I guess what's happening is that the highlight stays permanently superimposed over the stroke.
Right now I am using the hacky solution of just making the stroke and highlight colors the same so that the bug is invisible, but this has the side effect of making the highlight on complete invisible as well. An additional issue is that the "highlightCompleteColor" setting seems to have no effect.

Here is an example with a light blue stroke color and white highlight color. The resulting strokes permanently end up in multiple different shades of blue.

[chanind]

That does look pretty messed up! Are there any actions you can take to get the bug to show appear, or does it just happen at random? What device/browser is it? Any tips you can give to help reproduce the bug would help a lot for debugging

[chanind]

I see what you mean about highlightCompleteColor being ignored. I'm surprised nobody has reported this before. It also seems to have slipped through tests too, so I'll try to get that fixed. Sorry about that!

[GnitLores]

Thank you for the quick response.
I am using chrome on desktop. In order to show the next stroke to write, I am triggering a highlight for the next stroke a short delay (e.g. 500ms) after both starting the quiz and after a correct stroke using the onCorrectStroke callback. The timing is a bit precise, but if you write at approximately the same time as the highlight happens, the bug occurs very frequently.

It probably doesn't matter, but in the above image I am using the Japanese character set and the following settings:
width: 300,
height: 300,
padding: 0,
leniency: 1.5,
showCharacter: false,
showOutline: true,
showHintAfterMisses: 3,
strokeHighlightSpeed: 1,
strokeColor: "#38BDF8",
highlightColor: "#FFFFFF",
outlineColor: "#6B7280",
drawingColor: "#38BDF8",

[chanind]

I think I see the bug you're running into, it looks like if you trigger multiple highlights at the same time then the animation for the in-progress one cancels and doesn't finish. Ideally these stroke highlights should be able to happen in parallel, but regardless they shouldn't just freeze like is happening now.

The obvious fix is to have the highlight disappear if it gets interrupted rather than just hang out there like it does currently. Longer-term, I'll try to figure out what's going on that's keeping the highlights from being able to happen concurrently. That might require some more refactoring / investigation though, so I'll push the quick fix for now (which is what the behavior should be anyway tbh)

[chanind]

🎉 This issue has been resolved in version 3.4.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[GnitLores]

That's great! I can confirm that things appear to be working as intended now, and it looks a lot better. Thanks for looking into these issues so quickly.