javascript - Add remove icon on image in canvas HTML5 and Fabric js -

i using html5 , fabric.js. uploading multiple images. want user can remove uploaded image. show 1 screen shot.

i want add 1 remove icon on image when user clicked on image.

html code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>  <input type="file" id="file"> <input type="color" value="blue" id="fill" /> <select id="font"> 

java sript code:

var canvas = new fabric.canvas('canvas');  document.getelementbyid('file').addeventlistener("change", function (e) {   var file = e.target.files[0];   var reader = new filereader();   console.log("reader   " + reader);   reader.onload = function (f) {     var data = f.target.result;     fabric.image.fromurl(data, function (img) {       var oimg = img.set({left: 70, top: 100, width: 250, height: 200, angle: 0}).scale(0.9);       canvas.add(oimg).renderall();       canvas.setactiveobject(oimg);       // add event listener       oimg.on('mousedown', function(){         // bring image front         oimg.bringtofront();         });     });   };   reader.readasdataurl(file); });  $('#fill').change(function(){   var obj = canvas.getactiveobject();   if(obj){     obj.setfill($(this).val());   }   canvas.renderall(); });  $('#font').change(function(){   var obj = canvas.getactiveobject();   if(obj){     obj.setfontfamily($(this).val());   }   canvas.renderall(); });  function addtext() {   var otext = new fabric.itext('tap , type', {      left: 100,      top: 100 ,   });    canvas.add(otext);   canvas.setactiveobject(otext);   $('#fill, #font').trigger('change');   otext.bringtofront(); }  document.queryselector('#txt').onclick = function (e) {   e.preventdefault();   canvas.deactivateall().renderall();   document.queryselector('#preview').src = canvas.todataurl(); }; 

css code:

canvas{   border: 1px solid black; } 

you can see link.write custom text on image canvas fabric.js , html5

after click on cross icon image should remove. can add remove icon. if yes give me idea this.

you'll need draw icon image using selected object's coordinates , it's width , height, rather having attached objects transformation point. if su, you'll lost resizing functionality transformation point. also, after object's rotation hard tell transformation point closest upper right corner. preffer have exterlal toolbar button, this, or have context menu it.

add button, or other element

<button id="remove" style="display:none">remove</button> 

and add code

$('#remove').on('click', function(){   canvas.getactiveobject().remove(); });  canvas.on('object:selected', function(o) {   if (o.target.istype('image')) {     $('#remove').show();   } });  canvas.on('selection:cleared', function() {     $('#remove').hide(); });