JSFiddle - React, Tailwind, and code Playground

by Steve Eberhardt

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.2/fabric.min.js"></script>
<span style="float:left" class="canvas-span">
  <canvas id="c" width="500" height="500"></canvas>
</span>

CSS

.canvas-span {
    border: 1px solid blue;
    margin-right: 10px;
  }

JavaScript

var canvas = window._canvas = new fabric.Canvas('c', {
  width: 500,
  height: 500
});

fabric.Object.prototype.objectCaching = false;

var clipPath = new fabric.Rect({
  width: 500,
  height: 250,
  top: 0,
  left: 0,
  absolutePositioned: true
});
var clipPath2 = new fabric.Rect({
  width: 500,
  height: 250,
  top: 250,
  left: 0,
  absolutePositioned: true
});

var Obj1 = new fabric.Rect({
  width: 100,
  height: 100,
  top: 0,
  left: 0,
  fill: 'red',
  clipPath: clipPath
});

var Obj2 = new fabric.Rect({
  width: 100,
  height: 100,
  top: 250,
  left: 0,
  fill: 'yellow',
  clipPath: clipPath2
});

canvas.add(Obj1, Obj2);

canvas.renderAll();