JSFiddle - React, Tailwind, and code Playground

by varun_1995

HTML

<canvas id="c" width="600" height="600"></canvas>
<button id="minus">-</button>
<button id="plus">+</button> scale : <span id="scale"></span>

JavaScript

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

  var radius = 50,
    x = 300,
    y = 300,
    lens,
    scale = 2,
    originalWidth = 600,
    originalHeight = 600;

  document.getElementById('scale').innerHTML = scale;

  fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function(img) {
    img.set({
      width: 400,
      height: 500,
      evented: true,
      selectable: false
    });

    lens = fabric.util.object.clone(img);
    lens.set({
      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(img, lens);
  });

  canvas.on('mouse:move', function(e) {
    x = e.e.layerX;
    y = e.e.layerY;
    lens.set('left', -(scale - 1) * x);
    lens.set('top', -(scale - 1) * y);
    canvas.renderAll();
  });

  document.getElementById('minus').addEventListener('click', function(e) {
    if (scale > 2) {
      scale--;
      resizeLens();
      document.getElementById('scale').innerHTML = scale;
    }
  });

  document.getElementById('plus').addEventListener('click', function(e) {
    scale++;
    resizeLens();
    document.getElementById('scale').innerHTML = scale;
  });

  function resizeLens() {
    lens.set('width', scale * originalWidth);
    lens.set('height', scale * originalHeight);
  }
})();