freeDrawingBrush and mouse:down conflicts in fabric.js?

[TKapp336]

Does any one have a workaround or explanation as to why my canvas.freeDrawingBrush is not being plotted to the canvas if turned on (set equal to true via canvas.isDrawingMode) inside mouse:down event. It works perfectly fine if i set canvas.freeDrawingBrush = true outside the mouse:down event handler, but because of a timing issue, logically it makes sense to set it to true inside the mouse:down. Any work arounds here?

(isDrawingMode = false is set outside of this event handler)

new_canvas.on('mouse:down', function(e) {
isMouseDown = true;
new_canvas.isDrawingMode = true;
new_canvas.freeDrawingBrush.color = selectedColor
console.log("This is the canvas' current drawing mode: ")
console.log(new_canvas.isDrawingMode)
console.log(new_canvas.freeDrawingBrush.color)
console.log(new_canvas.freeDrawingBrush.width)
new_canvas.requestRenderAll(); // Re-render the canvas
}
});

[ShaMan123]

did you try on the mouse:down:before event?

[asturur]

Do you think you can put everything in a fiddle/codepen to better understand?
When you say After this i would select the path i drew, delete it, then turn back on the drawing mode to draw a new path are those code instructions or user interactions?

[TKapp336]

Yes, I will try to simplify dependencies and put in codepen. These are user interactions (i'm testing as user for game that's about to go on my website).

[ShaMan123]

A repro is needed for sure.
I am guessing you turn it on/off after/before the brush logic works respectively so you get into a weird state in which the brush did not cleanup itself.
I suggest you visit the code the inspect when fabric calls the brush and when you toggle it.

[TKapp336]

Okay, here's the codepen for the issue of the path not plotting when i draw it and only the arrowhead appearing (this is the current state, when the isDrawingMode is set to true inside the mouse:down event handler, and set back to false in the mouse:up event handler). I don't understand why the path won't plot, i.e., the freeDrawingBrush won't fire.

https://codepen.io/TKapp336/pen/GRzdaQG

If there's no workaround here, I can revert back to a prior state where i was updating the isDrawingMode is set to true before the event handlers, and I can try that too.

I apologize for the codepen's visuals not being clean, it wasn't easy to go through my code and remove all dependencies, so i kind of just punted, since the visual of the rink canvas being perfectly fit in the window (in codepen) seems somewhat irrelevant.

Please let me know if you have any thoughts or ways i could fix from this state of the code, thanks:)

[TKapp336]

Additionally, one of my fellow programmers has been trying to debug it, he believes he almost got it working, but he's now getting this weird behavior (the square scribbles, he claims to not have drawn that part, and is unsure how that happened)...not sure if this is something you all have ever encountered?

[TKapp336]

I just want to let the administrators know i've fixed the problem, so you can close this issue. It was very difficult to figure out, but got it. Thank you for your suggestions and ideas:)

[ShaMan123]

Part of the "contract" of opening an issue and asking for help is that if you manage to solve it you post your findings.
This is done to respect our effort in many aspects, our time spent on this ticket, our time and effort spent on developing fabric and our discretion as maintainers/collaborators.
Could be you found something we want to fix/improve but now we can't because we have no idea what it is.
Please do.

[TKapp336]

Okay, I understand:)

(1) So this issue occurred when I was trying to prevent a user from plotting an incorrect number of lines (with the free drawing brush) on a canvas for a particular quiz. So, let's say a quiz allows for two lines to be plotted. If a user plots two lines, and then tries to click down to plot a third line, I'd raise an alert and turn off the canvas brush with the isDrawingMode = false. However, this i guess was not firing soon enough, as i later found even when i was stopping them from drawing the extra line, a tiny, tiny, little dot was still registering on the canvas, before the isMouseDown was turned off. This dot was the culprit, as when i tried to manually turn the isDrawingMode back on, to plot a new line, it would connect the dot to my mouse (even when my mouse was up). I don't know why this was happening but i know this was the issue.

(2) The second issue (my attempt at a work around) is simply if I turn on the isMouseDown inside an event handler, such as the mouse:down event handler, the free drawing brush doesn't register soon enough or get's overwritten or something, so the line the brush is supposed to draw never appears.

I solved (1) by immediately turning off the isDrawingMode in the mouse:up event handler given the user had reached the maximum amount of paths allowed for the particular quiz. So, when the user went to plot an extra (incorrect) line, the isDrawingMode had long since been off, resulting in no dot appearing, and therefore no weird drawingmode state when i manually turned the isDrawingMode back on. Finding the issue with (1) is how I resolved, (2) at least for me, is a limitation in the library that could not be worked around, but was irrelevant once i fixed (1).

[ShaMan123]

I undersatnd
Preventing default behavior is not easy or dev friendly in fabric, it should be.
You should get fimiliar with beginPath