JSFiddle - React, Tailwind, and code Playground

by franknstayn

HTML

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

CSS

canvas {
    border: 1px solid yellow;
}

JavaScript

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

var backgroundColor = "green";

var opts = {
    backgroundColor: 'pink',
    controlsAboveOverlay: true,
    setLineDash: true,
    clipTo: function (ctx) {
        if (typeof backgroundColor !== 'undefined') {
            ctx.fillStyle = backgroundColor;
            ctx.fillRect(0, 0, 500, 150);
            console.log(ctx);
        }
        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)'
}));