Add Delete button on element in Canvas Fabric JS

fabric js remove object by id
fabric js multiple canvases
fabric.js custom controls
fabric js delete canvas
fabric js examples
fabric js hide object
fabric js image demo
fabric js documentation

Hi I want to add delete button in element using FabricJS. I Have an example:

I try adding this part of code but when I resize image the delete button don't stay on place.

http://jsfiddle.net/wxao1on8/13/

   function addDeleteBtn(x, y, w){
        $(".deleteBtn").remove();
        var btnLeft = x;
        var btnTop = y - 30;
        var widthadjust=w/2;
        btnLeft=widthadjust+btnLeft-1
        var deleteBtn = '<img src="https://www.funagain.com/images/old/common/delete-icon.png" class="deleteBtn" ' +
                'style="position:absolute;top:'+btnTop+'px;right:'+btnLeft+'px;cursor:pointer;"/>';
        $(".canvas-container").append(deleteBtn);
    }

    canvas.on('object:selected',function(e){
        addDeleteBtn(e.target.oCoords.mt.x, e.target.oCoords.mt.y, e.target.width);
    });

    canvas.on('mouse:down',function(e){
        if(!canvas.getActiveObject())
        {
            $(".deleteBtn").remove();
        }
    });

    canvas.on('object:modified',function(e){
        addDeleteBtn(e.target.oCoords.mt.x, e.target.oCoords.mt.y, e.target.width);
    });

    canvas.on('object:moving',function(e){
        $(".deleteBtn").remove();
    });

    $(document).on('click',".deleteBtn",function(){
        if(canvas.getActiveObject())
        {
            canvas.remove(canvas.getActiveObject());
            $(".deleteBtn").remove();
        }
    });

target.oCoords.mt is middle-top corner.

Use the top-right corner instead: e.target.oCoords.tr

    var canvas = new fabric.Canvas('canvas');
var HideControls = {
            'tl':true,
            'tr':false,
            'bl':true,
            'br':true,
            'ml':true,
            'mt':true,
            'mr':true,
            'mb':true,
            'mtr':true
        };
fabric.Image.fromURL('http://serio.piiym.net/CVBla/txtboard/thumb/1260285874089s.jpg', function (img) {
    img.top = 60;
    img.left = 30;
    img.setControlsVisibility(HideControls);
    canvas.add(img);
});

canvas.renderAll();

function addDeleteBtn(x, y){
    $(".deleteBtn").remove(); 
    var btnLeft = x-10;
    var btnTop = y-10;
    var deleteBtn = '<img src="https://www.funagain.com/images/old/common/delete-icon.png" class="deleteBtn" style="position:absolute;top:'+btnTop+'px;left:'+btnLeft+'px;cursor:pointer;width:20px;height:20px;"/>';
    $(".canvas-container").append(deleteBtn);
}

canvas.on('object:selected',function(e){
        addDeleteBtn(e.target.oCoords.tr.x, e.target.oCoords.tr.y);
});

canvas.on('mouse:down',function(e){
    if(!canvas.getActiveObject())
    {
        $(".deleteBtn").remove(); 
    }
});

canvas.on('object:modified',function(e){
    addDeleteBtn(e.target.oCoords.tr.x, e.target.oCoords.tr.y);
});

canvas.on('object:scaling',function(e){
    $(".deleteBtn").remove(); 
});
canvas.on('object:moving',function(e){
    $(".deleteBtn").remove(); 
});
canvas.on('object:rotating',function(e){
    $(".deleteBtn").remove(); 
});
$(document).on('click',".deleteBtn",function(){
    if(canvas.getActiveObject())
    {
        canvas.remove(canvas.getActiveObject());
        $(".deleteBtn").remove();
    }
});

delete selected objects in fabricjs - JSFiddle, <button id="delete">Delete selected object(s)</button>. JavaScript + var canvas = new fabric.Canvas('paper' Adding objects to the canvas 14. . 15. But I don't have the solution for seeing two elements. I see the first element, next, if i push another button, this completely clears the canvas and adds the new element, but clears the first element. If I click in the canvas square, return the first created element. Why? As I can see when I have two different buttons two different element

Hello i would suggest a different approach to this functionality that it is more stable as it does not add elements on the DOM , we can use it on as many objects as we like , we dont need to hide and show the custom corner buttons, and the corner buttons are visible each time the object is active(native fabricjs functions).

  1. I am going to override the object's prototype _drawControl function , for to add my custom corner images.
  2. And override the canvas prototype _setCornerCursor , for to change realtime the mouse cursor ,according to which corner is over.
  3. I have made a live fiddle here : https://jsfiddle.net/tornado1979/j987gb6f/

A. First of all i need to preload the custom corner images, so whenever we click on an object there would not be any delay(i used random images just for the show).

var ctrlImages = new Array()

  function preload() {
    for (i = 0; i < preload.arguments.length; i++) {
      ctrlImages[i] = new Image();
      ctrlImages[i].src = preload.arguments[i];
    }
  }

  preload(
      "https://cdn1.iconfinder.com/data/icons/ui-color/512/Untitled-12-128.png",
      "https://cdn2.iconfinder.com/data/icons/social-messaging-productivity-1/128/sync-16.png",
      "https://cdn2.iconfinder.com/data/icons/social-messaging-productivity-1/128/write-compose-16.png",

B. I override the _drawcontrol (i show just the snippet that change the corners):

switch (control)
            {
            case 'tl':
              SelectedIconImage.src = ctrlImages[1].src;//our custom img
              break;
            case 'tr':
              if (flipiX && !flipiY) { n='2'; }
              if (!flipiX && flipiY) { n='3'; }
              if (flipiX && flipiY) { n='4'; }
              SelectedIconImage.src = ctrlImages[0].src;//our custom img
              break;
            case 'mt':

              break;
            case 'bl':
              if (flipiY) { n='2'; }
             SelectedIconImage.src = ctrlImages[3].src;//our custom img
              break;
            case 'br':
              if (flipiX || flipiY) { n='2'; }
              if (flipiX && flipiY) { n=''; }
              SelectedIconImage.src = ctrlImages[2].src;//our custom img
              break;
            case 'mb':

              break;
            case 'ml':

              break;
            case 'mr':

              break;
            default:
              ctx[methodName](left, top, sizeX, sizeY);
              break;
            }

C. Override _setCornerCursor function, for to change the cursor when mouse is over object's corner. Inside the function i use the setCursor() function which actually takes a string as a parameter, so we can take a look here for cursors: https://www.w3.org/TR/css3-ui/#cursor

fabric.Canvas.prototype._setCornerCursor =  function(corner, target) {
      //for top left corner
       if(corner == "tl"){
          this.setCursor(this.rotationCursor); return false;
          //for top right corner
      }else if(corner == "tr"){
          this.setCursor('pointer'); return false;
          //for bottom left corner
      }else if(corner == "bl"){
          this.setCursor('help'); return false;      
          //for bottom right corner
      }else if(corner == "br"){
          this.setCursor('copy'); return false;      
      }
    };

D. And finaly on mouse:down i check the corner and add functionality canvas.on('mouse:down',function(e){..}

Hope helps, good luck.

fabric.js delete selected object � GitHub, <button id="delete">Delete selected object(s)</button>. gistfile2.txt. JS. ___ canvas.isDrawingMode = false;. deleteObjects();. }); // Adding objects to the canvas� The <canvas> element no longer attached to the DOM tree, by running canvas.parentNode.removeChild(canvas) you could make it done From your provided code, you don't do the DOM removal , maybe your <canvas> is not attached to DOM tree, but if it is, remember to remove it.

Drawing with FabricJS and TypeScript: Deleting Objects, Let's add a deletion feature to our drawing canvas! to react when canvas elements are selected, so it can enable or disable the delete button. Struggling to remove multiple objects from the fabric canvas. Everything seems to be in working order but when the code runs it does not remove the multiple selected objects from the canvas.

How to toggle/select/delete custom shapes using fabric.js canvas , How to toggle/select/delete custom shapes using fabric.js canvas <button id=" line" class="btn btn-info">Straight Line</button> <button id="circle" class="btn btn -info">Circle</button> <button How can I delete these shapes as a group selection (I've tried to create a I'm able to delete one object at a time when using this:. No, you can’t put a button element inside a canvas element, but as other have pointed out, you may put button elements above the canvas element. However, if you are using a canvas as a UI and wish to do so fully, you can create clickable areas (such as buttons) inside a canvas!

Removing Object(s), Anything Selected, from FabricJS Canvas on , I can currently delete selected objects on my FabricJS canvas with a button but Add Accents 1 and 2 for example, and choose the Delete button to see what I� Fabric provides interactive object model on top of canvas element Fabric also has SVG-to-canvas (and canvas-to-SVG ) parser Using Fabric.js, you can create and populate objects on canvas; objects like simple geometrical shapes

JSDoc: Class: Canvas, Tutorial: http://fabricjs.com/fabric-intro-part-1#canvas Collection.remove, fabric. Object Use of this function is highly discouraged for groups. you can add a� Stepping in here You're asking a simple question using a lot of specific keywords that is getting everyone else confused. You do need to "delete", what you are working with is not an "element", nor does this have anything to do with a "canvas" or the "canvas graphics".

Comments
  • Hi, Why do you needed flipiX and flipiY ? If just for rotation of icons, then why they are given as parameters to the _drawControls function. I am confused.