JSFiddle - React, Tailwind, and code Playground

by Shakti Patel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.0.0-beta.5/fabric.js"></script>
<canvas id="canvas" width="500" height="500"></canvas>
<button id='btnRotate' onclick="changeRotation()" >
Rotate
</button>

CSS

#canvas {
    box-shadow: 0 0 5px 1px black;
}

JavaScript

var imgURL = 'http://i.imgur.com/8rmMZI3.jpg';

(function() {
  var canvas = new fabric.Canvas('canvas');
  var clipPath = new fabric.Rect({ top: -200, left: -200, width: 100, height: 100});
  var clipPath2 = new fabric.Circle({ top: 0, left: 0, width: 100, height: 100 });
  var clipPath3 = new fabric.Circle({ radius: 100, top: 0, left: -200, width: 100, height: 100 });
  var clipPath4 = new fabric.Circle({ radius: 100, top: -200, left: 0 });
  var g = new fabric.Group([clipPath, clipPath2, clipPath3, clipPath4]);
  //g.inverted = true;
  fabric.Image.fromURL(imgURL, function(img) {
    img.clipPath = g;
    img.scaleToWidth(500);
    canvas.add(img);
  });
})()