JSFiddle - React, Tailwind, and code Playground

by Pedro Marcano

HTML

<canvas id="c" width="400" height="400"></canvas>
<a id="download">remove it</a>
<a id="add">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 = "http://edudemic.com/wp-content/uploads/2012/09/jail_photo.jpg";
var img2 = "https://lh5.googleusercontent.com/-anj-zM1LS_U/UUOVJlHqwgI/AAAAAAAADmw/0W69iTbERtE/s568-no/IMG_Corp_Logo_RGB_b2.png";

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

});

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

canvas.on({'object:selected': function(e){
     var obj = e.target;
     //alert(obj.id);
     alert(canvas.getActiveObject().getSrc()); 
     
     canvas.getActiveObject(  "src",'https://lh5.googleusercontent.com/-anj-zM1LS_U/UUOVJlHqwgI/AAAAAAAADmw/0W69iTbERtE/s568-no/IMG_Corp_Logo_RGB_b2.png') ;
     
     
     /*
     var tmp=canvas.item(0).getElement();
     
     tmp.setAttribute("src", 'https://lh5.googleusercontent.com/-anj-zM1LS_U/UUOVJlHqwgI/AAAAAAAADmw/0W69iTbERtE/s568-no/IMG_Corp_Logo_RGB_b2.png'); 
    */
    canvas.renderAll();
    canvas.calcOffset();   

}});
/*
document.getElementById('add').onclick = function () {
     var tmp=canvas.item(0).getElement();
     //var src = tmp.src;      

     tmp.setAttribute("src", 'https://lh5.googleusercontent.com/-anj-zM1LS_U/UUOVJlHqwgI/AAAAAAAADmw/0W69iTbERtE/s568-no/IMG_Corp_Logo_RGB_b2.png'); 
    
    canvas.renderAll();
    canvas.calcOffset();   

};*/