JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/1.2.1/lodash.min.js"></script>
<canvas id="c" width="400" height="400"></canvas>

CSS

#c {
    border:1px solid #ccc;
}

JavaScript

var img01URL = 'https://www.google.com/images/srpr/logo4w.png';
var img02URL = 'http://fabricjs.com/lib/pug.jpg';

var canvas = new fabric.Canvas('c');

var lastActive;

// Note the use of the `originX` and `originY` properties, which we set
// to 'left' and 'top', respectively. This makes the math in the `clipTo`
// functions a little bit more straight-forward.
var clipRect1 = new fabric.Rect({
    originX: 'left',
    originY: 'top',
    left: 180,
    top: 10,
    width: 200,
    height: 200,
    fill: 'none',
    stroke: 'black',
    strokeWidth: 2,
    selectable: false
});
// We give these `Rect` objects a name property so the `clipTo` functions can
// find the one by which they want to be clipped.
clipRect1.set({
    clipFor: 'pug'
});
canvas.add(clipRect1);

var clipRect2 = new fabric.Rect({
    originX: 'left',
    originY: 'top',
    left: 10,
    top: 10,
    width: 150,
    height: 150,
    fill: 'none',
    stroke: 'black',
    strokeWidth: 2,
    selectable: false
});
// We give these `Rect` objects a name property so the `clipTo` functions can
// find the one by which they want to be clipped.
clipRect2.set({
    clipFor: 'logo'
});
canvas.add(clipRect2);

function findByClipName(name) {
    return _(canvas.getObjects()).where({
            clipFor: name
        }).first()
}

// Since the `angle` property of the Image object is stored 
// in degrees, we'll use this to convert it to radians.
function degToRad(degrees) {
    return degrees * (Math.PI / 180);
}








var clipByName = function (ctx,item) {
    //console.log("Function Run: ");
    //console.log(this);
    //console.log(item);
    
    //console.log(ctx);
    
    
    if(!item) { item = this; }
    console.log(item);
    console.log("ITEM:  "+item.clipName);
   
    
    if (!lastActive || lastActive && lastActive != item) {
    console.log("Last Active: ");
    console.log(lastActive);
        
    console.log("  !! Perform ClipTo Action !! ");
        
    var clipRect =...