JSFiddle - React, Tailwind, and code Playground

by 20yco

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 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 = false;
    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 = true;
    canvas.add(oImg1);
});
canvas.renderAll();

canvas.on('object:selected',function(e){


        jQuery(".deleteBtn").remove(); 
        var btnLeft = e.target.oCoords.mt.x;
        var btnTop = e.target.oCoords.mt.y - 25;
        var widthadjust=e.target.width/2;
        btnLeft=widthadjust+btnLeft-10;
        var deleteBtn = '<p" class="deleteBtn" title="Delete" style="position:absolute;top:'+btnTop+'px;left:'+btnLeft+'px;cursor:pointer;" title="Remove object">&#10005;</p>';
        jQuery(".canvas-container").append(deleteBtn);
        //.canvas-container is the parent div to the canvas positioned relative via CSS



    });

canvas.on('mouse:down',function(e){
    if(canvas.getActiveObject())
    {

    }
    else
    {
         jQuery(".deleteBtn").remove(); 
    }
});


canvas.on('object:modified',function(e){


        jQuery(".deleteBtn").remove(); 
        var btnLeft = e.target.oCoords.mt.x;
        var btnTop = e.target.oCoords.mt.y - 25;
        var widthadjust=e.target.width/2;
        btnLeft=widthadjust+btnLeft-10;
        var deleteBtn = '<p" class="deleteBtn" title="Delete" style="position:absolute;top:'+btnTop+'px;left:'+btnLeft+'px;cursor:pointer;" title="Remove object">&#10005;</p>';
        jQuery(".canvas-container").append(deleteBtn);
        //.canvas-container is the parent div to the canvas positioned relative via CSS



   ...