'Fabric Js - change position of control corners

I have a fabric js rectangle and I would like to move the control squares inside the rectangle.

I don't know if this is possible in the version I'm using, I didn't found how to do this.

Note I am using fabric.js version: 2.4.6

Here is what I've tried:

      this._cropRect = new window.fabric.Rect({
        top: 0,
        left: 0,
        width: this.options.canvasWidth,
        height: this.options.canvasHeight,
        fill: 'red',
        strokeWidth: 0,
        lockRotation: true,
        lockScalingFlip: true,
        lockUniScaling: true,
        hasBorders: false,
        hasRotatingPoint: false,
        padding: -12,
        cornerColor: 'red',
        borderColor: 'red',
        cornerStroke: 10,
        borderScaleFactor: 2,
        cornerSize: CROP_CORNER_SIZE,
        borderOpacityWhenMoving: 1,
      })

      this._cropRect.set('globalCompositeOperation', 'destination-out')

      this._fabricCanvas.add(this._cropRect)
      this._fabricCanvas.setActiveObject(this._cropRect)
      this._fabricCanvas.requestRenderAll()

Here is the image of what I have now and what I want to achieve:

enter image description here

UPDATE:

I have created a jsfiddle: https://jsfiddle.net/t94ksgeq/



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source