title: How to remove the line drawn in canvas without select her
body: <p>Im using the canvas(with fabric.js) to draw lines over an image, but on mouse:up i open a modal to make a note, after that I list the notes below the canvas. But  sometimes I need to remove a specific note and respective line that corresponds her. I Already remove a line but not the specific line for the respective note.</p>
  
  <p>My JS:</p>
  
  <pre><code>(function() {
  
    var $ = function(id){
      return document.getElementById(id);
    };
  
    var canvas = this.__canvas = new fabric.Canvas('c', {
      isDrawingMode: true
    });
  
    var imgOdontogramaInfantil = './img/od-infantil.png';
  
    canvas.setBackgroundImage(imgOdontogramaInfantil, canvas.renderAll.bind(canvas), {
        backgroundImageOpacity: 0.0,
        backgroundImageStretch: false
    });
  
    fabric.Object.prototype.transparentCorners = false;
  
    var drawingModeEl = $('drawing-mode'),
        drawingOptionsEl = $('drawing-mode-options'),
        drawingColorEl = $('drawing-color'),
        drawingShadowColorEl = $('drawing-shadow-color'),
        drawingLineWidthEl = $('drawing-line-width'),
        drawingShadowWidth = $('drawing-shadow-width'),
        drawingShadowOffset = $('drawing-shadow-offset'),
        clearEl = $('clear-canvas');
  
    clearEl.onclick = function() {
      canvas.clear();
    };
  
    drawingModeEl.onclick = function() {
      canvas.isDrawingMode = !canvas.isDrawingMode;
      if (canvas.isDrawingMode) {
        drawingModeEl.innerHTML = 'Cancel drawing mode';
        drawingOptionsEl.style.display = '';
      }
      else {
        drawingModeEl.innerHTML = 'Enter drawing mode';
        drawingOptionsEl.style.display = 'none';
      }
    };
  
    if (fabric.PatternBrush) {
      var vLinePatternBrush = new fabric.PatternBrush(canvas);
      vLinePatternBrush.getPatternSrc = function() {
  
        var patternCanvas = fabric.document.createElement('canvas');
        patternCanvas.width = patternCanvas.height = 10;
        var ctx = patternCanvas.getContext('2d');
  
        ctx.strokeStyle = this.color;
        ctx.lineWidth = 5;
        ctx.beginPath();
        ctx.moveTo(0, 5);
        ctx.lineTo(10, 5);
        ctx.closePath();
        ctx.stroke();
  
        return patternCanvas;
      };
  
      var hLinePatternBrush = new fabric.PatternBrush(canvas);
      hLinePatternBrush.getPatternSrc = function() {
  
        //Linha teste
        line.id = fabric.Object.__uid++;
  
        var patternCanvas = fabric.document.createElement('canvas');
        patternCanvas.width = patternCanvas.height = 10;
        var ctx = patternCanvas.getContext('2d');
  
        ctx.strokeStyle = this.color;
        ctx.lineWidth = 5;
        ctx.beginPath();
        ctx.moveTo(5, 0);
        ctx.lineTo(5, 10);
        ctx.closePath();
        ctx.stroke();
  
        return patternCanvas;
      };
  
      var squarePatternBrush = new fabric.PatternBrush(canvas);
      squarePatternBrush.getPatternSrc = function() {
  
        var squareWidth = 10, squareDistance = 2;
  
        var patternCanvas = fabric.document.createElement('canvas');
        patternCanvas.width = patternCanvas.height = squareWidth + squareDistance;
        var ctx = patternCanvas.getContext('2d');
  
        ctx.fillStyle = this.color;
        ctx.fillRect(0, 0, squareWidth, squareWidth);
  
        return patternCanvas;
      };
  
      var diamondPatternBrush = new fabric.PatternBrush(canvas);
      diamondPatternBrush.getPatternSrc = function() {
  
        var squareWidth = 10, squareDistance = 5;
        var patternCanvas = fabric.document.createElement('canvas');
        var rect = new fabric.Rect({
          width: squareWidth,
          height: squareWidth,
          angle: 45,
          fill: this.color
        });
  
        var canvasWidth = rect.getBoundingRectWidth();
  
        patternCanvas.width = patternCanvas.height = canvasWidth + squareDistance;
        rect.set({ left: canvasWidth / 2, top: canvasWidth / 2 });
  
        var ctx = patternCanvas.getContext('2d');
        rect.render(ctx);
  
        return patternCanvas;
      };
  
      var img = new Image();
      img.src = '../img/od-infantil.png';
  
      var texturePatternBrush = new fabric.PatternBrush(canvas);
      texturePatternBrush.source = img;
    }
  
    $('drawing-mode-selector').onchange = function() {
  
      if (this.value === 'hline') {
        canvas.freeDrawingBrush = vLinePatternBrush;
      }
      else if (this.value === 'vline') {
        canvas.freeDrawingBrush = hLinePatternBrush;
      }
      else if (this.value === 'square') {
        canvas.freeDrawingBrush = squarePatternBrush;
      }
      else if (this.value === 'diamond') {
        canvas.freeDrawingBrush = diamondPatternBrush;
      }
      else if (this.value === 'texture') {
        canvas.freeDrawingBrush = texturePatternBrush;
      }
      else {
        canvas.freeDrawingBrush = new fabric[this.value + 'Brush'](canvas);
      }
  
      if (canvas.freeDrawingBrush) {
        canvas.freeDrawingBrush.color = drawingColorEl.value;
        canvas.freeDrawingBrush.width = parseInt(drawingLineWidthEl.value, 10) || 1;
        canvas.freeDrawingBrush.shadowBlur = parseInt(drawingShadowWidth.value, 10) || 0;
      }
    };
  
    drawingColorEl.onchange = function() {
      canvas.freeDrawingBrush.color = this.value;
    };
    drawingShadowColorEl.onchange = function() {
      canvas.freeDrawingBrush.shadowColor = this.value;
    };
    drawingLineWidthEl.onchange = function() {
      canvas.freeDrawingBrush.width = parseInt(this.value, 5) || 1;
      this.previousSibling.innerHTML = this.value;
    };
    drawingShadowWidth.onchange = function() {
      canvas.freeDrawingBrush.shadowBlur = parseInt(this.value, 10) || 0;
      this.previousSibling.innerHTML = this.value;
    };
    drawingShadowOffset.onchange = function() {
      canvas.freeDrawingBrush.shadowOffsetX =
      canvas.freeDrawingBrush.shadowOffsetY = parseInt(this.value, 10) || 0;
      this.previousSibling.innerHTML = this.value;
    };
  
    if (canvas.freeDrawingBrush) {
      canvas.freeDrawingBrush.color = drawingColorEl.value;
      canvas.freeDrawingBrush.width = parseInt(drawingLineWidthEl.value, 10) || 1;
      canvas.freeDrawingBrush.shadowBlur = 0;
    }
  
    //Mouse:up events
  
  var creatingModal = false;
  
  canvas.on('mouse:up', function (){
        creatingModal = true;
        jQuery('#modal').modal('show').trigger('shown');
        //get values from obs form
        jQuery(document).on("click", "#submitObservacao", function(e){
          e.preventDefault();
  
          var denteNumero   = jQuery("#dente").val();
          var procedimentos = jQuery("#procedimentos").val();
          var observacao    = jQuery("#observacoes").val();
  
          //iuncrement id itemObs
          var canvas_objects = canvas._objects, lastId = 0;
            if(canvas_objects.length !== 0){
              var lastId = canvas_objects[canvas_objects.length -1].id;
            }
          jQuery("#anotacoes").append(
            '&lt;div lineId="' + lastId + '" class="thumbnail mark" id="itemObs" data-toggle="modal" data-target="#EditMod"&gt;&lt;b&gt;Dente&lt;/b&gt;:&lt;span id="anotacaoDente" class="anotDent"&gt;'+ denteNumero +'&lt;/span&gt; &lt;i class="fa fa-trash f-right" id="removerNow" aria-hidden="true"&gt;&lt;/i&gt; &lt;br&gt; &lt;b&gt;Procedimentos:&lt;/b&gt; &lt;span id="anotacaoProcedimentos"&gt;'+ procedimentos +'&lt;/span&gt;&lt;br&gt; &lt;b&gt;Observações:&lt;/b&gt; &lt;span id="anotacaoObservacao"&gt;'+ observacao +'&lt;/span&gt;&lt;br&gt; &lt;/div&gt;'
          );
  
  
          jQuery('.anotDent').each(function(i){
            jQuery(this).addClass('.uniqueDent' + i);
        });
  
          //refreshing values
          jQuery(denteNumero).val('');
          jQuery("#dente").val('');
          jQuery(procedimentos).val('');
          jQuery(observacao).val('');
          jQuery("#observacoes").val('');
          jQuery('#modal').modal('hide').unique();
        });
  
        jQuery(document).on("click", "#removerNow", function(e){
          e.preventDefault();
  
          jQuery(this).parent().remove();
  
          var canvas_objects = canvas._objects;
          console.log(canvas_objects);
            if(canvas_objects.length !== 0){
              var last = canvas_objects[canvas_objects.length -1]; //Get last object
              canvas.remove(last);
              canvase.renderAll();
             }
        });
    });
  
    jQuery(document).on("click", ".mark", function(e){
            e.preventDefault();
              var marcador = jQuery(this).attr('.uniqueDent');
              console.log(marcador);
             var numDente = jQuery(this).find(".anotDent").html();
             var numObservacoes = jQuery(this).find("#anotacaoObservacao").html();
             var numProcedimentos = jQuery(this).find("#anotacaoProcedimentos").html();
  
            jQuery("#obsModalEdit input[name=dente]").val(numDente);
            jQuery("#obsModalEdit select[name=procedimentos]").val(numProcedimentos);
            jQuery("#obsModalEdit textarea[name=observacoes]").val(numObservacoes);
  
    });
  
    //Edit on click
    jQuery(document).on("click", "#submitEditar", function(e){
      e.preventDefault();
  
      var numDente   = jQuery("#denteEdit").val();
      var numProcedimentos = jQuery("#procedimentosEdit").val();
      var numObservacoes     = jQuery("#observacoesEdit").val();
  
      //Can't you changed the value of the relevant controller like this.
      // jQuery(document).ready( "unique", function(){
      //
      // });
  
      // jQuery(this).attr(".uniqueDente", i);
      // console.log(i);
      jQuery("#anotacaoDente").val(numDente);
      jQuery("#anotacaoDente").html(numDente);
      // console.log(marcador);
  
      jQuery('#anotacaoProcedimentos').val(numProcedimentos);
      jQuery('#anotacaoProcedimentos').html(numProcedimentos);
  
      jQuery("#anotacaoObservacao").val(numObservacoes);
      jQuery("#anotacaoObservacao").html(numObservacoes);
  
      jQuery("#submitEditar").html("Salvando..").addClass('btn-success');
      jQuery("#submitEditar").delay(3000);
      jQuery("#submitEditar").html("Salvo, Clique aqui para fechar");
      jQuery("#submitEditar").addClass('closeModal');
  
      jQuery(document).on("click", ".closeModal", function(){
        jQuery('#EditMod').modal('hide');
        jQuery("#submitEditar").removeClass('closeModal');
        jQuery("#submitEditar").removeClass('btn-success');
        jQuery("#submitEditar").html("Editar Anotação");
      });
    });
  
  })();
  </code></pre>
  
  <p>My function that removes the line only remove the last drawned line in canvas not the specific line that i needed. Thanks.</p>