You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
(Yes I've already seen this post and it doesn't solve or reference my problem)
What I'm trying to achieve is showing the fill as the user is drawing. Not just when the path is created (as seen in the demo below) which it also sets that fill for all the other paths drawn which I don't want. I ONLY want the fill to apply only to the path that's being drawn and show the fill as it's being drawn.
My question is, "How can I showing the fill as the user is drawing using free drawing in fabric.js?"
What you are looking for is a custom brush.
Take a look at PencilBrush and BaseBrush.
It should be relatively straight forward extending PencilBrush and adding some logic to closePath on context.
The gist:
When a user is drawing the brush is in charge of rendering what you see.
The brush uses the top context, bottom context is used by fabric.Canvas.
Once drawing is done a path is created and added to canvas.
Top context is cleared.
This is done for performance reasons. Top context is there for that reason.
BTW, EraserBrush is exactly what I have described here, but ever more complicated.
Brief simplified explanation of the solution:
I created a new class called LassoBrush (very similar to the PencilBrush class except stroke width value is 0, stroke color = null and fill I changed from null to this.color (for which is whatever the user sets) and then is called like so....
canvas.freeDrawingBrush = new fabric.LassoBrush(canvas);
canvas.freeDrawingBrush.color = '#000';
canvas.isDrawingMode = true;
In fabric.js, we can draw free hand paths (http://fabricjs.com/freedrawing) (http://fabricjs.com/fabric-intro-part-4#free_drawing)
(Yes I've already seen this post and it doesn't solve or reference my problem)
What I'm trying to achieve is showing the fill as the user is drawing. Not just when the path is created (as seen in the demo below) which it also sets that fill for all the other paths drawn which I don't want. I ONLY want the fill to apply only to the path that's being drawn and show the fill as it's being drawn.
My question is, "How can I showing the fill as the user is drawing using free drawing in fabric.js?"
The text was updated successfully, but these errors were encountered: