JSFiddle - React, Tailwind, and code Playground

by varun_1995

HTML

<canvas id="c" width="500" height="500"></canvas>
<canvas id="cNew" width="500" height="500"></canvas>
<button id="fillColors">
Danger
</button>

CSS

canvas {
  border: 1px solid #999;
}

img {
  display: none;
}

canvasNew {
  border: 1px solid #999;
}

JavaScript

// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');
var canvasNew = new fabric.Canvas('cNew');
//var canvasButton =  new fabric.Canvas('cButton');
//$loggingEl = $('#logging');

canvas.selection = false;

// Do some initializing stuff
fabric.Object.prototype.set({
  transparentCorners: false,
  cornerColor: 'rgba(102,153,255,0.5)',
  cornerSize: 12,
  padding: 5
});

fabric.Image.fromURL("http://fabricjs.com/assets/pug_small.jpg", function(img) {
  canvas.insertAt(img.set({
    left: 200,
    top: 100,
    lockMovementX: true,
    lockMovementY: true,
    lockScaling: true,
    LockRotation: true,
    selectable: false,
    isDrawingMode: true
  }).scale(0.5));

  canvasNew.insertAt(img.set({
    left: 200,
    top: 100,
   // width: 100,
    //height: 100,
    lockMovementX: true,
    lockMovementY: true,
    lockScaling: true,
    LockRotation: true,
    selectable: false,
    //isDrawingMode: true
  }).scale(0.5));
   
});

canvas.on('mouse:down', function(o) {
  isDown = true;
  var pointer = canvas.getPointer(o.e);
  origX = pointer.x;
  origY = pointer.y;
  rect = new fabric.Rect({
    left: origX,
    top: origY,
    originX: 'left',
    originY: 'top',
    width: pointer.x - origX,
    height: pointer.y - origY,
    angle: 0,
    fill: "transparent",
    stroke: "red",
    strokeWidth: 3,
    transparentCorners: false
  });
  canvas.add(rect);
});
var rect, isDown, origX, origY;
canvas.on('mouse:move', function(o) {
  if (!isDown) return;
  var pointer = canvas.getPointer(o.e);

  if (origX > pointer.x) {
    rect.set({
      left: Math.abs(pointer.x)
    });
  }
  if (origY > pointer.y) {
    rect.set({
      top: Math.abs(pointer.y)
    });
  }

  rect.set({
    width: Math.abs(origX - pointer.x)
  });
  rect.set({
    height: Math.abs(origY - pointer.y)
  });

  canvas.renderAll();
  console.log('positions:x' + pointer.x + 'positions:y' + pointer.y)

});

canvas.on('mouse:up',...