fabric.js straight line and select on click
<p>I made 3 modes for this code:</p>

<ol>
<li>select line </li>
<li>draw line and </li>
<li>delete line.</li>
</ol>

<p>It looks like it is working. But I want to change 2 things.
For example that every time when I select a line i just need to click it.</p>

<p>Can you tell me how i can improve my code ?</p>

<p>Thank You for your answers.</p>

<p>This is my code:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
 &lt;script type ="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"&gt;&lt;/script&gt;
 &lt;script type ="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;title&gt;Test&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;button id="select"&gt;Selection mode&lt;/button&gt;
&lt;button id="draw"&gt;Drawing mode&lt;/button&gt;

&lt;button id="delete"&gt;Delete selected object(s)&lt;/button&gt;&lt;br /&gt;
&lt;canvas id="c" width="400" height="400" style="border:1px solid #ccc"&gt;&lt;/canvas&gt;

&lt;script type="text/javascript"&gt;
var line, isDown,mode;

var canvas = new fabric.Canvas('c');

$("#select").click(function(){
    mode="select";   
         canvas.selection=true;
     canvas.perPixelTargetFind = true;
     canvas.targetFindTolerance = 4;
     canvas.renderAll();
});
$("#draw").click(function(){
    
     
    mode="draw";
});
$("#delete").click(function(){
    
    
    deleteObjects();
});

// Adding objects to the canvas...

 
canvas.on('mouse:down', function(o){
  isDown = true;
  var pointer = canvas.getPointer(o.e);
  var points = [ pointer.x, pointer.y, pointer.x, pointer.y ];
   
  if(mode=="draw"){
    line = new fabric.Line(points, {
    strokeWidth: 5,
    fill: 'red',
    stroke: 'red',
    originX: 'center',
    originY: 'center',

  });
  canvas.add(line);}
});
 
canvas.on('mouse:move', function(o){
  if (!isDown) return;
  var pointer = canvas.getPointer(o.e);
  
  if(mode=="draw"){
  line.set({ x2: pointer.x, y2: pointer.y });
  canvas.renderAll(); }
});

canvas.on('mouse:up', function(o){
  isDown = false;
});

  

// select all objects
function deleteObjects(){
    var activeObject = canvas.getActiveObject(),
    activeGroup = canvas.getActiveGroup();
    if (activeObject) {
        if (confirm('Are you sure?')) {
            canvas.remove(activeObject);
        }
    }
    else if (activeGroup) {
        if (confirm('Are you sure?')) {
            var objectsInGroup = activeGroup.getObjects();
            canvas.discardActiveGroup();
            objectsInGroup.forEach(function(object) {
            canvas.remove(object);
            });
        }
    }
}
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>Ps.: Sorry for bad english or mistakes.</p>