[fabricJS] draw alternative line with custom class

by Vijay Gujar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.min.js"></script>

<canvas id="mainCanvas" width="400" height="300"></canvas>

CSS

canvas {
  display: block;
  border: 1px solid;
}

JavaScript

var canvas, canvas2;
    canvas = new fabric.Canvas('mainCanvas');
    
    canvas.backgroundColor = '#efefef';
    
    var line1 = new fabric.Line([50, 50, 100, 100], {
        fill: 'red',
        stroke: 'red',
        strokeWidth: 2,
        hasControls: true,
        hasRotatingPoint: true,
        
        left: 80,
        top: 50
        
    });
   var line2 = new fabric.Line([100, 50, 100, 100], {
        fill: 'red',
        stroke: 'red',
        strokeWidth: 2,
        hasControls: true,
        hasRotatingPoint: true,
        
        left: 80,
        top: 50
        
    });
    canvas.add(line1);
    canvas.add(line2);
    canvas.setActiveObject(line2);
    canvas2.renderAll();