How to toggle/select/delete custom shapes using fabric.js canvas

Question

I am using the answer provided by Krunal Shah/Thirdrocktechkno from this question: how to free draw using fabric-js, which works fine (at least I can toggle the different shapes and draw on my canvas) however I'm trying to figure out a few things.

Toggle between the different shapes (circle/line/arrow/square) if there's a more preferred way then this:

This is what I have to switch between the shapes but I can't turn them off individually when set, only switch to different shapes:

HTML:

<button id="line" class="btn btn-info">Straight Line</button>
<button id="circle" class="btn btn-info">Circle</button>
<button id="squrect" class="btn btn-info">Square/Rectangle</button>
<button id="arrow" class="btn btn-info">Arrow</button>

JS:

// Tried this to disable/untoggle the shape
var lineOn = false;
$("#line").click(function(){
    if(!lineOn){
         lineOn = true;
         canvas.isDrawingMode = false;
         var line = new Line(canvas);
    } else if(lineOn = true){
        lineOn = false;
        $(Line(canvas)).unbind();
    }
});

$("#circle").click(function(){
    canvas.isDrawingMode = false;
    var circle = new Circle(canvas);
});

$("#squrect").click(function(){
    canvas.isDrawingMode = false;
    var squrect = new Rectangle(canvas);
});

$("#arrow").click(function(){
    canvas.isDrawingMode = false;
    var arrow = new Arrow(canvas);
});

How to disable/unbind/turn off the shape so it stops drawing?
I did see this but not sure how to use it:

Line.prototype.disable = function() { this.isDrawing = false; }

How can I delete these shapes as a group selection (I've tried to create a getSelection function and have searched the questions, googled, and checked the wiki but I'm just not understanding it or missing something. The activeGroup way states the function is undefined. I'm able to delete one object at a time when using this:

$("#delete").click(function(){ canvas.isDrawingMode = false; deleteObjects(); });

function deleteObjects(){
    var activeObject = canvas.getActiveObject();
    if (activeObject) {
        canvas.discardActiveObject();
        canvas.remove(activeObject);
        canvas.remove(Line);
        canvas.remove(Circle);
        canvas.remove(Rectangle);
        canvas.remove(Arrow);
    } else if (canvas.getActiveGroup()) {
        canvas.getActiveGroup().forEachObject(function(a) {
            canvas.remove(a);
        });
        canvas.discardActiveGroup();
    } 
}

However since I can't seem to untoggle the line/circle/etc. shape, if I go into selection mode with something like the following, the line/circle shape that is set keeps drawing the shape when mouse clicked (even in free draw mode), it will show the selection box too but if I try to delete the selection it does not work

$("#select").click(function(){
    canvas.isDrawingMode = false;
    this.isDrawing = false;
    canvas.selection = true;
});

This is incorrect - "else if(lineOn = true)". this would assign true to lineOn where you wanted to check if lineOn is truthy. So you should rather use "else if(lineOn". Also can you post a sample demo where the issue can be reproduced(jsfiddle or stackoverflow snippet) to help address the issue. — user700284
Sorry, I'm still new to a lot of this, I appreciate your response. I did make the change but if I select the Line tool, draw a line. select line tool again, I'm still drawing the line. Then if I select Free Draw, and start using the different brushes, the line shape will continue to draw as well. Also here is the Jsfiddle jsfiddle.net/7amunr73/1 — Rovert
@Trevor Do you want toggle button functionality? I mean one click on line button enable line, and again if click on line, then it will disable? — Durga
@Durga, yes, or dropdown with all of the shapes listed with one option to disable/turn off. Anything that would let me quickly select a different shape, plop it on, switch to a different shape, put it on, then turn the shape toggle off and either go to free draw mode or w/e else — Rovert

Durga Durga · Accepted Answer · 2017-11-10T07:20:39

canvas.off('mouse:down');
canvas.off('mouse:up');
canvas.off('mouse:move');

Use canvas.off method to remove attached events. You are registering event to canvas but not removing it while selection/ free drawing that's why it draws the tools. Check updated jsFiddle

How to toggle/select/delete custom shapes using fabric.js canvas

1 Answers