JSFiddle - React, Tailwind, and code Playground

by irina_dfy

HTML

<script src="http://code.jquery.com/jquery.min.js"></script>
<div class="wrapper" id="wrapper">

            <canvas id="c" width="400" height="400"></canvas>

            <br/>
            <button id="zin">+</button>
            <button id="reset">Reset All</button>
            <button id="zout">-</button>
            <br/>                      
            <div class="myMenu" id="myMenu">
                <ul>
                    <li>Select to Drop</li>
                    <li><a href="#" id="addPawn">Pawn Icon</a></li>
                </ul>
            </div>
        </div>

CSS

.wrapper{width:400px;margin:0 auto;text-align: center;position:relative;}
            .canvas-container{margin:0 auto;}
            .myMenu{                
                position:absolute;     
                display: none;
                width: 120px;
            }

            .myMenu ul{

                list-style: none;
                margin:0;
                padding:0;
            }

            .myMenu li{
                width: 140px;
                background: #e5e5e5;
                border:1px solid #ccc;                
                color:#b5b5b5; 
            }

            .myMenu li:first-child{
                width: 120px;
                padding:5px 10px;
                cursor: default;
            }

            .myMenu a{
                color:#3d7cb9;
                text-decoration: none;
                display:block;
                padding:5px 10px;
            }

            .myMenu a:hover{
                background-color:#3d7cb9;
                color:#fff;                
            }
            input{
                width:40px;
            }

JavaScript

var src = "http://demo.realsoftts.com/poc/img/chessboard.jpg";
var pawn = 'http://demo.realsoftts.com/poc/img/pawn.png';

var canvasScale = 1;
var SCALE_FACTOR = 1.2;

$(document).bind('contextmenu', function(e) {
    e.preventDefault();
});

$(function() {
    var canvas = new fabric.Canvas('c');
    canvas.backgroundColor = "#F5F5F5";
    canvas.selection = false;
    var object;

    fabric.util.loadImage(src, function(img) {
        object = new fabric.Image(img);
        object.set({
            id: 'bg',
            width: 400,
            height: 400,
            left: 0,
            top: 0
        });
        object.hasRotatingPoint = object.hasControls = object.hasBorders = false;
        canvas.add(object);
      
      object.on('moving', function() {
            le = object.getLeft();
            to = object.getTop();            
            var gg = canvas.getObjects();
           
            if (gg.length > 1) {
                for (var i = 1; i < gg.length; i++) {                  
                    var left = gg[i].left + le - prevPosX;
                    var top = gg[i].top + to - prevPosY;                    
                    gg[i].left = left;
                    gg[i].top = top;
                    gg[i].setCoords();                    
                }
            }
            prevPosX = le;
            prevPosY = to;

        });
    });  
    
  var curX, curY;

    fabric.util.addListener(document.getElementsByClassName('upper-canvas')[0], 'contextmenu', function(e) {
        var cnvsPos = $('#wrapper').offset();
        curX = e.clientX - cnvsPos.left;
        curY = e.clientY - cnvsPos.top;
        $('#myMenu').css({'top': curY, 'left': curX}).fadeIn('slow');
        //console.log("Position of the cursor point" + curX + "," + curY);
    });
  
  $(document).click(function(event) {
        if (!$(event.target).closest('#myMenu').length) {
            if ($('#myMenu').css("display", "block")) {
               ...