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?"
var canvas = new fabric.Canvas('c', {
isDrawingMode: true
});
canvas.on('path:created', function() {
canvas.getObjects().forEach(o => {
o.fill = '#000'
});
canvas.renderAll();
});canvas {
border: 1px solid #ccc;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.js"></script>
<canvas id="c" width="600" height="400"></canvas>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;
For anyone wanting to know how to solve this....
What you are looking for is a custom brush.
Take a look at PencilBrush and BaseBrush.
It's 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.