JSFiddle - React, Tailwind, and code Playground

by Q4Dizzy

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.6/fabric.min.js"></script>
<canvas id="preview"></canvas>

CSS

.wrapper {
  width: 700px;
  height: 640px;
  position: relative;
  outline: 1px solid #000;
  margin: 10px auto;
}

#block {
  width: 200px;
  height: 150px;
}

.canvas-container {
  outline: 1px solid #000;
}

JavaScript

var canvas = new fabric.Canvas('preview').setDimensions({
  width: 700,
  height: 640
});

function addImg(src) {
  fabric.Image.fromURL(src, function(oImg) {
    canvas.add(oImg.set({
      left: 0,
      top: 0,
      clipName: 'pug',
      clipTo: function(ctx){
      	ctx.rect(0,0,100,100);
      }
    })).setActiveObject(oImg);
  });
}

var clipRect1 = new fabric.Rect({
  left: 0,
  top: 0,
  width: 200,
  height: 200,
  fill: 'transparent',
  stroke: 'red',
  strokeWidth: 1,
  selectable: false
});

clipRect1.set({
  clipFor: 'pug'
});

canvas.add(clipRect1);

addImg('http://fabricjs.com/lib/pug.jpg');