Add Little Lines In Fabric Js Selection Controls

When you have a canvas element set to hasControls little controls render when the user clicks the element. These controls are little canvas squares. I would like to overlay little

Solution 1:

override fabric Object _drawControl function:

   fabric.Object.prototype._drawControl = function(control, ctx, methodName, left, top) {
      if (!this.isControlVisible(control)) {
        return;
      }
      var size = this.cornerSize;
      this.transparentCorners || ctx.clearRect(left, top, size, size);
      ctx[methodName](left, top, size, size);
      /* added code */
      ctx.save();
      var space = 2;
      ctx.beginPath();
      ctx.moveTo(left + space, top + space);
      ctx.lineTo(left + size - space, top + space);
      ctx.stroke();
      ctx.restore();
    };
canvas = new fabric.Canvas('canvas');
canvas.add(new fabric.Rect({width: 50, left: 50, top: 50, height: 50}));

<scriptsrc="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><canvasid='canvas'width="500"height="400"style="border:#000 1px solid;"></canvas>

This is of course just an example of how you can achieve it.