prevent image transform in case not cover clipping path fully

by thobn24h

HTML

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.6/fabric.min.js" integrity="sha512-XcwgBTqf2CXR/nsswCV1e0j9CjXo87APyBsATK2/l7MvTpcIG0QYKA87v5KIJ4RS6ytArv2pWD6UcRorKhYp1A==" crossorigin="anonymous"></script>

<div id="canvasContainer">
  <canvas id="editorCanvas"></canvas>
</div>

CSS

#canvasContainer {
        width: 100%;
        height: 100vh;
        background-color: gray;
      }

JavaScript

var canvasObject = document.getElementById("editorCanvas");

        // set canvas equal size with div
        $(canvasObject).width($("#canvasContainer").width());
        $(canvasObject).height($("#canvasContainer").height());

        var canvas = new fabric.Canvas('editorCanvas', {
          backgroundColor: 'white',
          selectionLineWidth: 2,
          width: $("#canvasContainer").width(),
          height: $("#canvasContainer").height()
        });

        // create a clipping path
        var rectClippingPath = new fabric.Rect({
          top: 100,
          left: 200,
          width: 200,
          height: 200,
          fill: 'red',
          angle: 30,
          absolutePositioned: true
        });

        // create image
        var newImage = new fabric.Image();
        newImage.clipPath = rectClippingPath;
        canvas.add(newImage);

        newImage.setSrc('http://fabricjs.com/assets/pug_small.jpg', (imageObject) => {
          newImage.set({ left: 50, top: 50});
          canvas.setActiveObject(newImage);
          newImage.setCoords();
          canvas.requestRenderAll();
        })