JSFiddle - React, Tailwind, and code Playground

by mishragaurav31

HTML

<canvas id="c" width="400" height="400"></canvas><br>
<a id="removeit">remove it</a>
<a id="changesrc">Add it</a>

CSS

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

JavaScript

var canvas = new fabric.Canvas('c');

	function getObjectById(id) {
		canvas.forEachObject(function(o) {
			if (o.id === id) {
				return o;
			}
		});
		return null;
	}

var img = "https://images.befunky.com/prismic/c87a10974915a6dc1a142024957fdad162732354_en-crop-img.jpg";

	fabric.Image.fromURL(img, function (source) {
	img = source.set({
		left: 0,
		top: 0,
		angle: 0,
		id:'moveit'
	});
	canvas.add(img);
	canvas.renderAll();
	});

  document.getElementById('removeit').onclick = function() {
      alert('hii');
    var removeit = getObjectById('moveit');
      canvas.remove(removeit);
      canvas.renderAll();
  };


  document.getElementById('changesrc').onclick = function() {
      alert('hii');
    getObjectById('moveit').src='https://www.w3schools.com/w3css/img_lights.jpg';
      canvas.remove(removeit);
      canvas.renderAll();canvas.renderAll();canvas.renderAll();
  };