JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.21/fabric.js"></script>
<canvas id="canvas"></canvas>

JavaScript

var URL = 'https://codyhouse.co/demo/360-degrees-product-viewer/img/alfa.png';
var canvas = new fabric.Canvas('canvas');
var positions = {
  topSteps: 1,
  leftSteps: 16
};
var y = 0;
var x = 0;
var topStep;
var leftStep;
canWalk(URL, positions);
function canWalk(URL, positions) {
  var myImage = new Image();
  myImage.src = URL;
  //var mDown = false;      
  //onloadevent
  myImage.onload = function () {
    topStep = myImage.naturalHeight / positions.topSteps;
    leftStep = myImage.naturalWidth / positions.leftSteps;
    var docCanvas = document.getElementById('canvas');
    docCanvas.height = topStep;
    docCanvas.width = leftStep;
    fabricImageFromURL(x, y);
  };
}
//mouseevents 
canvas.on('mouse:out', function (event) {
  console.log("mouseout")
  /*  x=0;
  y=0;
  fabricImageFromURL(x,y);*/
});
canvas.on('mouse:move', function (event) {
  resetvalue();
  setTimeout(function () {
    console.log('value of x in start', x)
    console.log('positions.leftSteps', positions.leftSteps)
    if (x == positions.leftSteps) {

      y = 1;
      fabricImageFromURL(-y * topStep, -x * leftStep)
    }
    else {

      fabricImageFromURL(-y * topStep, -x * leftStep)
      if (x < positions.leftSteps) {
        x++;
      }

    }

  }, 1);

});

function resetvalue() {
  if (x == positions.leftSteps) {
    x = 0;
    y = 0;
    console.log("x and y value reset to0")
  }

}
function fabricImageFromURL(top, left) {
  console.log('fabricImageFromURL value', top, left);
  fabric.Image.fromURL(URL, function (oImg) {
    oImg.set('left', left).set('top', top);
    oImg.hasControls = false;
    oImg.hasBorders = false;
    oImg.selectable = false;
    canvas.add(oImg);
    canvas.renderAll();
  }, { "left": 0, "top": 0, "scaleX": 1, "scaleY": 1 });
}