Saturday 23 October 2021

fabric.js: Fill free drawing path as user is drawing (lasso tool)

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>


from fabric.js: Fill free drawing path as user is drawing (lasso tool)

No comments:

Post a Comment