JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="c" width="400" height="400"></canvas>
<br>
<a id="cg1">change image</a>

<a id="cg2">change text</a>

CSS

canvas {
    border-width: 1pz;
    border-style: solid;
    border-color: #000;
}

JavaScript

var canvas = new fabric.Canvas('c');
var group;
fabric.Image.fromURL('http://icons.iconarchive.com/icons/benjigarner/softdimension/256/Image-ready-CS-2-icon.png', function (img) {
    var img1 = img.set({
        left: 0,
        top: 0
    });
    fabric.Image.fromURL('http://demo-stable-ofbiz.apache.org/images/products/GZ-1000/small.png', function (img) {
        var img2 = img.set({
            left: 0,
            top: 0
        });
        group = new fabric.Group([img1, img2], {
            left: 0,
            top: 0
        });
        canvas.add(group)
    });
});


var comicSansText = new fabric.Text("I'm in Comic Sans name", {
    fontFamily: 'Comic Sans'
});

var circle = new fabric.Circle({
    radius: 100,
    fill: '#942f99',
    scaleY: 0.5,
    originX: 'center',
    originY: 'center'
});

var group2 = new fabric.Group([comicSansText, circle], {
    left: 150,
    top: 100,
    angle: -10
});

canvas.add(group2);



document.getElementById('cg1').onclick = function () {
    fabric.util.loadImage("http://upload.wikimedia.org/wikipedia/en/0/0c/IrfanView_Logo.png", function (img) {
        group.item(1).setElement(img);
            canvas.renderAll();
    });
};

document.getElementById('cg2').onclick = function () {
    group2.item(1).setFill('red');
    canvas.renderAll();
};