JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="canvas-container" class="over">
    <div class="canvas-container" style="width: 800px; height: 600px; position: relative; -webkit-user-select: none;">
        <canvas id="canvas" width="800" height="600"></canvas>
    </div>
</div>

CSS

* {
    margin:0;
    padding:0;
    font-family:Verdana, Geneva, sans-serif;
    font-size:16px;
}
body {
    background:#8f8f8f;
}
canvas {
}
#canvas-container {
    background:#fff;
    width:800px;
}
.canvas-container {
    background:#fff;
    width:800px;
    background-size:100%;
}
.clearfix:after {
    clear: both;
    content:' ';
    display: block;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    width: 0;
    height: 0;
}
.clearfix {
    display: inline-block;
}
* html .clearfix {
    height: 1%;
}
.clearfix {
    display: block;
}
.button {
    -moz-box-shadow:inset 0px 1px 0px 0px #cae3fc;
    -webkit-box-shadow:inset 0px 1px 0px 0px #cae3fc;
    box-shadow:inset 0px 1px 0px 0px #cae3fc;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #4197ee));
    background:-moz-linear-gradient(center top, #79bbff 5%, #4197ee 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#4197ee');
    background-color:#79bbff;
    -webkit-border-top-left-radius:6px;
    -moz-border-radius-topleft:6px;
    border-top-left-radius:6px;
    -webkit-border-top-right-radius:6px;
    -moz-border-radius-topright:6px;
    border-top-right-radius:6px;
    -webkit-border-bottom-right-radius:6px;
    -moz-border-radius-bottomright:6px;
    border-bottom-right-radius:6px;
    -webkit-border-bottom-left-radius:6px;
    -moz-border-radius-bottomleft:6px;
    border-bottom-left-radius:6px;
    text-indent:0;
    border:1px solid #469df5;
    display:inline-block;
    color:#ffffff;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
    height:50px;
    line-height:50px;
    padding:0 20px;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #287ace;
    text-transform:uppercase;
    margin:10px;
}
.button:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #4197ee),...

JavaScript

var canvas = new fabric.Canvas('canvas');
var el;
var object, lastActive, object1, object2;
var cntObj = 0;
var selection_object_left = 0;
var selection_object_top = 0;
var cos = Math.cos, sin = Math.sin;
    

var src = "http://fabricjs.com/lib/pug.jpg";
fabric.Image.fromURL('http://serio.piiym.net/CVBla/txtboard/thumb/1260285874089s.jpg', function (oImg) {
    oImg.top = 60;
    oImg.left = 30;
    oImg.hasControls = true;
    canvas.add(oImg);
});

fabric.Image.fromURL('http://www.clker.com/cliparts/2/5/6/5/1194986466653224692smiley110.svg.med.png', function (oImg1) {
    oImg1.top = 200;
    oImg1.left = 300;
    oImg1.hasControls = false;
    canvas.add(oImg1);
});
canvas.renderAll();


canvas.on('mouse:down', function (e) {
    if (canvas.getActiveObject())
        jQuery(".deleteBtn").remove();
});

canvas.on('object:modified', function (e) {
var angle = e.target.angle * Math.PI / 180
    jQuery(".deleteBtn").remove();
    var center = e.target.getCenterPoint();
    var btnLeft = ((e.target.width / 2)  -10 )* cos(angle) + ((e.target.height / 2) +25) * sin(angle);
    var btnTop = -((e.target.height / 2) +25 )* cos(angle) + ((e.target.width / 2) -10 ) * sin(angle);
    btnLeft = center.x + btnLeft;
    btnTop = center.y + btnTop;
    var deleteBtn = '<div" class="deleteBtn" title="Delete" style="position:absolute;top:' + btnTop + 'px;left:' + btnLeft + 'px;cursor:pointer;width:2px;height:2px;background-color:#000000" title="Remove object"></div>';
    jQuery(".canvas-container").append(deleteBtn);
});

canvas.on('object:moving', function (e) {
    jQuery(".deleteBtn").remove();
    //remove the delete button while the object is being moved
});

//THE DELETE BUTTON CLICK EVENT
jQuery(document).on('click', ".deleteBtn", function () {
    if (canvas.getActiveObject()) {
        canvas.remove(canvas.getActiveObject());
        //this would remove the currently active object on stage,
        jQuery(this).remove();
        jQuery(".deleteBtn").remove();
    }
})