FabricJS - Prevent flip on scale

When scaling images using the object controls in FabricJS, it is possible to flip the image over. To prevent this, set "lockScalingFlip" to true. This fiddle shows an example of this fix.

by Keyur Patel

HTML

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<script src="http://promincproductions.com/gaTrackingJSFiddle.js"></script>
<p>The image on the left can be flipped over when scaling using the object controls.  Try resizing, possibly with erratic moves, and you'll notice the image flips upside down.</p>
<p>The image on the righ thas lockScalingFlip set to true.  This prevents the image from being able to be flipped.  Try resizing that image as well; you won't be able to flip it.</p>
<p>NOTE: I've found that this attribute is specific to the version of FabricJS you are using.  I'm not sure when it was added, but I know in version 1.4.11 lockScalingFlip works.  1.4.0 it does NOT.</p>

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

CSS

canvas{
  border-width: 1pz;
  border-style: solid;
  border-color: #000;
}

JavaScript

var canvas = new fabric.Canvas('c');

var src = "http://fabricjs.com/lib/pug.jpg";

var rotateThisImage;

fabric.Image.fromURL(src, function(oImg1) {
    oImg1.set({
        width: 150,
        height: 150,
        left: 125,
        top: 125,
        originX:  'center',
        originY: 'center',
        centeredScaling: true,
        hasControls: true
    });
    canvas.add(oImg1);
    canvas.renderAll();
});

fabric.Image.fromURL(src, function(oImg2) {
    oImg2.set({
        width: 150,
        height: 150,
        left: 275,
        top: 275,
        originX:  'center',
        originY: 'center',
        centeredScaling: true,
        hasControls: true,
        lockScalingFlip: true
    });
    canvas.add(oImg2);
    canvas.renderAll();
});