Search code examples
javascriptphppaintfabricjs

Alternative of Eraser Tool(Fabric js) for a open source Eraser tool

I want to create an online drawing tool using fabric js deployed in a PHP web page.Most of the customized tools of fabric,js, i created successfully.

But i cannot create Eraser tool like in MS Paint eraser..

I found this alternative method for eraser.This will do mask whilte color in the object 

function eraser() {
   mode = 'pencil';
   canvas.isDrawingMode = true;
   canvas.freeDrawingBrush.width = strokeWidth;
   canvas.freeDrawingBrush.color = 'white';
}

But, I want to create an eraser similar to MS Paint. I checked in SO, In Fabric js there is no built in eraser

Plz any one help me.

Is it possible to make eraser in fabric js?.

if not possible, Can you suggest any easy alternative of fabric js, like any open source/free web drawing tool which will support the function of eraser.

Solution

  • Unfortunately fabric.js does not support this functionality. I think the best way to do this is drawing with the background color, like this example: http://fabricjs.com/freedrawing/

    However I found this great example: http://jsfiddle.net/ArtBIT/WUXDb/1/

    var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
var radius = 10; // or whatever
var fillColor = '#ff0000';
ctx.globalCompositeOperation = 'destination-out';
ctx.fillCircle(x, y, radius, fillColor);

    I hope this helps.