Fabric.js Rectangle with Stroke

by Balázs Baumgartner

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<canvas id="canvas" width="800" height="600"></canvas>

JavaScript

(function() {
    var canvas = this.__canvas = new fabric.Canvas('canvas');
    
    const height = 500;
    const width = 320;
    const thickness = 40;
  
    // create a rectangle with a fill and a different color stroke
    var pol_1 = new fabric.Polygon([
      {x: 0, y: 0},
      {x: 0, y: height},
      {x: thickness, y: height},
      {x: thickness, y: thickness} ], {
        left: 0,
        top: 0,
        angle: 0,
        fill: 'red'
      }
    );
    
    var pol_2 = new fabric.Polygon([
      {x: 0, y: 0},
      {x: width, y: 0},
      {x: width - thickness, y: thickness},
      {x: thickness, y: thickness},
    ], {
        left: 0,
        top: 0,
        angle: 0,
        fill: 'green'
      }
    );
    
    var pol_3 = new fabric.Polygon([
      {x: thickness, y: 0},
      {x: thickness, y: height},
      {x: 0, y: height},
      {x: 0, y: thickness} ], {
        left: width - thickness,
        top: 0,
        angle: 0,
        fill: 'blue'
      }
    );
    
    canvas.add(pol_1, pol_2, pol_3);
    canvas.renderAll();    
})();