JSFiddle - React, Tailwind, and code Playground

by prabhath

HTML

<canvas id="c" width="500" height="500" style="border:1px solid #ccc;"></canvas>

CSS

#c{
  left:50px;
  right:50px;
}

JavaScript

var canvas = new fabric.Canvas('c');
var clipingRect = new fabric.Rect({
    originX: 'left',
    originY: 'top',
    top: 50,
    left: 50,
    height: 400,
    width: 300,
    fill: 'white',
    selectable: false
});

fabric.Object.prototype.set({
	    transparentCorners: false,
	    cornerColor: '#000000',
		cornerStrokeColor: '#cccccc',
		borderColor: '#cccccc',
	    cornerSize: 12,
	    padding: 7,
		cornerStyle: 'rect',
		borderDashArray: [3, 3]
	});
var rec = new fabric.Rect({
  	top: 10,
    left: 10,
    width: 75,
    height: 100,
    fill: 'green'
});

canvas.backgroundColor = 'rgba(255,255,255,0.3)';

canvas.setBackgroundImage(clipingRect);
fabric.Image.fromURL('http://placeimg.com/640/480/any', function(fimg) {
    canvas.add(fimg.set({
        left: 0,
        top: 0,
        width: canvas.getWidth(),
        height: canvas.getHeight(),
        globalCompositeOperation: 'source-atop'
    }));
});
canvas.add(rec.set({ globalCompositeOperation: 'source-atop'}));
canvas.renderAll();