FabricJS FlipX object

I am having trouble flipping or mirroring the object horizontally when the object itself is clicked on the FabricJS canvas.

I came close but it was mirroring the object when it was being resized too, which I didn't want.

I would guess I need to add the 'flipX: true' attribute to object on the first click and on the next click remove that attribute and so on with each click. Or maybe that is over complicating it and it can be done much easier with a flipX function I do not know.

I did find a Fiddle that flipped the object, but it was onclick of a button not the object itself.

I am struggling to solve this :\

My Fiddle

HTML:

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

JS:

var canvas = this.__canvas = new fabric.Canvas('canvas');

canvas.on('object:selected', function() {
  toggle('flipX');
});

// create a rectangle
var rect = new fabric.Rect({
  left: 50,
  top: 50,
  width: 100,
  height: 50,
  angle: 20,
  fill: 'red'
});
canvas.add(rect);
canvas.renderAll();

Solution

You could accomplish that in the following way ...

var canvas = this.__canvas = new fabric.Canvas('canvas');

// mouse event
canvas.on('mouse:down', function(e) {
    if (e.target) {
        if (!e.target.__corner) {
            e.target.toggle('flipX');
            canvas.renderAll();
        }
        e.target.__corner = null;
    }
});

// create a rectangle
var rect = new fabric.Rect({
    left: 50,
    top: 50,
    width: 100,
    height: 50,
    angle: 20,
});

// set gradient (for demonstration)
rect.setGradient('fill', {
    type: 'linear',
    x1: -rect.width / 2,
    y1: 0,
    x2: rect.width / 2,
    y2: 0,
    colorStops: {
        0: '#ffe47b',
        1: 'rgb(111,154,211)'
    }
});

canvas.add(rect);
rect.set('flipX', true);
canvas.renderAll();

body{margin:10px 0 0 0;overflow:hidden}canvas{border:1px solid #ccc}

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