title: Clipping Area Angle Not Reflected
body: <p>I have a panel for creating something using canvas fabric js.
  Canvas has many placeholders like a rectangle and I want to add images in that particular area. I am making that area clipped so that the image does not leave that area.
  Now everything is working fine except that the clipping area does not set angle (Rotate is not working) using canvas instance.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>var clipByName = function (bindClip) {
  
      this.setCoords();
      var clipRect = findByClipName(this.clipName);
      var scaleXTo1 = (1 / this.scaleX);
      var scaleYTo1 = (1 / this.scaleY);
      bindClip.save();
  
      var ctxLeft = -( this.width / 2 ) + clipRect.strokeWidth;
      var ctxTop = -( this.height / 2 ) + clipRect.strokeWidth;
      var ctxWidth = clipRect.width - clipRect.strokeWidth;
      var ctxHeight = clipRect.height - clipRect.strokeWidth;
  
      bindClip.translate(ctxLeft, ctxTop);
  
  
      bindClip.rotate(this.angle *(Math.PI / 180) * -1);
      bindClip.scale(scaleXTo1, scaleYTo1);
  
      bindClip.beginPath();
      bindClip.rect(
          clipRect.left - this.oCoords.tl.x,
          clipRect.top - this.oCoords.tl.y,
          clipRect.width,
          clipRect.height
      );
      console.log(bindClip);
      bindClip.closePath();
      bindClip.restore();
  }
  </code></pre>
  
  <p>This is the URL where I want to see those changes. Try adding images by drag and drop.
  <a href="https://purplle.com/collection/create-collection/?template=175" rel="nofollow noreferrer">https://purplle.com/collection/create-collection/?template=175</a></p>
  
  <p>Kindly follow the below details:</p>
  
  <ol>
  <li>Search for products, for example, Lakme, Ponds, etc.</li>
  <li>Drag any image to the product placeholder.</li>
  </ol>
  
  <p>When moving the image, the clipping area is still not getting the angle of the current placeholder (Rectangle).</p>