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.

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.

• javascript
• php
• paint
• fabricjs

Share Improve this question Follow edited May 23, 2017 at 10:29 CommunityBot 111 silver badge asked May 20, 2015 at 8:40 SattanathanSattanathan 46399 silver badges2424 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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./freedrawing/

However I found this great example: http://jsfiddle/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.

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();
    });