JSFiddle - React, Tailwind, and code Playground

by moshfeu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
<div id="canvases">
  <canvas id="c" width="900" height="600"></canvas>
</div>

CSS

canvas {
  border-width: 1px;
  border-style: solid;
  border-color: #000;
}

JavaScript

(function() {
  var canvas = this.__canvas = new fabric.Canvas('c');

  var radius = 100,
    x = 300,
    y = 300,
    lens,
    img1
  scale = 2,
    originalWidth = 600,
    originalHeight = 600;
    
  var circle = new fabric.Circle({
    radius: 20,
    fill: 'green',
    left: 500,
    top: 100
  });
  
  var triangle = new fabric.Triangle({
    width: 20,
    height: 30,
    fill: 'blue',
    left: 450,
    top: 50
  });
  
  var group = new fabric.Group([ circle, triangle ], {
  	top: 0,
    left: 0,
    selectable: false
  });

  fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function(img) {
    img1 = img;
    img.set({
      width: originalWidth,
      height: originalHeight,
      evented: true,
      selectable: false,
      top: 0,
      left: 0
    });
    
    group.add(img)

    lens = fabric.util.object.clone(group);
    lens.set({
      top: -225,
      left: 150,
      width: scale * originalWidth,
      height: scale * originalHeight,
      clipTo: function(ctx) {
        ctx.arc(-this.left + x - this.width / 2, -this.top + y - this.height / 2, radius, 0, Math.PI * 2, true);
      }
    });

    canvas.add(group, lens);
    canvas.centerObject(img); //******* issue no longer here****

    canvas.sendToBack(img, lens);
  });

  canvas.on('mouse:move', function(e) {
    x = e.e.layerX;
    y = e.e.layerY;
    if (x > 150 && x < 750) {
      lens.set('left', -(scale - 1) * x + 300);
      lens.set('top', -(scale - 1) * y);
    }
    canvas.renderAll();
  });

})();