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

Question

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.

score 2 · Accepted Answer · answered May 20 '15 at 09:42

2

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.

answered May 20 '15 at 09:42

ptCoder

2,229
3
24
38

Thanks ptCoder, I m using this metthod only now.If cannt do in fabric js , plz suggest me any other alternate drawing tool which support eraser. – Sattanathan May 20 '15 at 11:09
Check this: http://stackoverflow.com/a/25916334/2247124. You may accept the answer if that helped ;) – ptCoder May 20 '15 at 12:05
Yes thanks prCoder.Your answer helped me. But paint like eraser wont support in fabric js. – Sattanathan May 25 '15 at 09:11

score 2 · Answer 2 · answered Apr 04 '19 at 10:56

This possibility exists, however you should reverse the action for when you just draw:

//eraser
    canvas.on('path:created', function (opt) {
        opt.path.globalCompositeOperation = 'destination-out';
        opt.path.lineWidth = strokeWidth;
        opt.path.stroke = 'rgba(0,0,0,0)';
        //opt.path.fill = 'black';
        canvas.requestRenderAll();
    });

 //draw
 canvas.on('path:created', function (opt) {
        opt.path.globalCompositeOperation = 'source-over';
        opt.path.lineWidth = strokeWidth;
        opt.path.stroke = 'black';
        //opt.path.fill = 'black';
        canvas.requestRenderAll();
    });

when this eraser commented method will call? – Parth M. Dave May 10 '23 at 10:28 — Parth M. Dave, May 10 '23 at 10:28

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

2 Answers2