JSFiddle - React, Tailwind, and code Playground

by John Grivas

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');

	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 });
			var group = new fabric.Group([ img1, img2], { left: 0, top: 0 });
			canvas.add(group)
		});
	});


var comicSansText = new fabric.Text("I'm in Comic Sans", {
  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() {
      group.item(1).setAttribute("src", "http://upload.wikimedia.org/wikipedia/en/0/0c/IrfanView_Logo.png");
      canvas.renderAll();
  };

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