JSFiddle - React, Tailwind, and code Playground

by 20yco

HTML

<canvas id="c"></canvas>

CSS

canvas {
    border: 1px solid #000;
}

JavaScript

var clipPath = new fabric.Path("M 10 10 L 100 10 L 100 100 L 10 100", {
    fill: 'rgba(0,0,0,0)',
});

var backgroundColor = "rgba(0,0,0, 0.3)";

var opts = {
    backgroundColor: 'rgba(255,255,255,.3)',
    controlsAboveOverlay: true,
    clipTo: function (ctx) {
        if (typeof backgroundColor !== 'undefined') {
            ctx.fillStyle = backgroundColor;
            ctx.fillRect(0, 0, 300, 150);
        }
        clipPath.render(ctx);
    }
}
var canvas = new fabric.Canvas('c', opts);

canvas.add(new fabric.Rect({
    width: 50,
    height: 50,
    left: 30,
    top: 30,
    fill: 'rgb(255,0,0)'
}));