Search code examples
drawingfabricjsopacityfill

fill a freehand drawing with opacity

I have a simple fuction which fills the drawn image if the user chooses to

canvas.on('mouse:up', function() { 
                if(main.mode == 'fill') {
                  var object = main.canvas.item(main.canvas.getObjects().length-1);
                  object.fill = main.pColor();  
                  canvas.renderAll();
                }
            })

this works fine for solid(opacity 1) colors. When using a color with less opacity:

enter image description here

It seems the stoke and fill overlap yielding a darker line.

I experimented with globalCompositeOperation. I am thinking eliminate the stroke or set the stroke opacity to zero. I hope there is a better answer.

Solution

  • I tried a few approaches: setting stroke opacity to zero and trying to get rid of the stroke altogether.

    what works best is adding

    object.set('strokeWidth', 0);

    to the handler above.

    set ensures the canvas will be updated.

    It is working well.