JSFiddle - React, Tailwind, and code Playground

by Anuraj MS

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/1.2.1/lodash.min.js"></script>
<canvas id="artcanvas" width="500" height="500"></canvas>

JavaScript

canvas = new fabric.Canvas('artcanvas');
addImageToCanvas("https://image.freepik.com/free-vector/blackboard_23-2147506793.jpg");
function addImageToCanvas(imgSrc) {

    fabric.Object.prototype.transparentCorners = false;

    fabric.Image.fromURL(imgSrc, function(myImg) {
        canvas.clear();

        var img1 = myImg.set({
            left: 20,
            top: 20,
            width: 460,
            height: 460
        });
        img1.selectable = false;
        canvas.add(img1);


        // 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 clipRectangle = new fabric.Rect({
            originX: 'left',
            originY: 'top',
            left: 150,
            top: 150,
            width: 200,
            height: 200,
            fill: 'transparent',
            /* use transparent for no fill */
            strokeDashArray: [10, 10],
            stroke: 'red',
            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.
        clipRectangle.set({
            clipFor: 'layer'
        });
        canvas.add(clipRectangle);


    });
}

addLayerToCanvas();
function addLayerToCanvas() {

     
    var clickedImage = new Image();
    clickedImage.onload = function(img) {

        var pug = new fabric.Image(clickedImage, {

            width: 100,
            height: 100,
            left: 150,
            top: 150,
            clipName: 'layer',
            clipTo: function(ctx) {
                return _.bind(clipByName, pug)(ctx)
            }
        });
        canvas.add(pug);
    };
    clickedImage.src = "https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg";
	
}
function clipByName(ctx) {
    this.setCoords();
    var clipRect =...