JSFiddle - React, Tailwind, and code Playground

by Arthur Lutkevichus

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(30,120,30, 0.2)";

var opts = {
    backgroundColor: 'rgb(255,255,255)',
    controlsAboveOverlay: true
}
var canvas = new fabric.Canvas('c', opts);

canvas.add(new fabric.Rect({
    width: 50,
    height: 50,
    left: 30,
    top: 30,
    fill: 'red',
    clipTo: function (ctx) {
        if (typeof backgroundColor !== 'undefined') {
            ctx.fillStyle = backgroundColor;
            ctx.fillRect(0, 0, 10, 10);
        }
        canvas.renderAll();
    }
}));