JSFiddle - React, Tailwind, and code Playground

by johan durand

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.17/fabric.js"></script>
<div id="canvasContainer">
  <canvas id="c" width="2000" height="800"></canvas>
</div>
<br>

CSS

#c {
	flex: 2;
	margin: auto auto auto;
	background-image: url(data:image/gif;base64,R0lGODlhCgAKAIAAAOLi4v///yH5BAAHAP8ALAAAAAAKAAoAAAIRhB2ZhxoM3GMSykqd1VltzxQAOw==);
	display: inline-block;
}

JavaScript

fabric.Image.prototype._render = function(ctx) {
  var fwidth = this._element.width / (this.zoomLevel + 1);
  var fheight = this._element.height / (this.zoomLevel + 1);
  var wdiff = (fwidth - this._element.width) / 2;
  var hdiff = (fheight - this._element.height) / 2;
  ctx.drawImage(this._element, -wdiff, -hdiff, fwidth, fheight, -this.width/2, - this.height/2, this.width, this.height);
}
      var canvas = this.__canvas = new fabric.Canvas('c');
      fabric.Image.fromURL("https://images.unsplash.com/photo-1533832422535-0e12e90e63a2?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3c07f6e6cee59e8057b91434c7178b08&auto=format&fit=crop&w=1876&q=80", function(img) {
        var zoomLevel = 0;
        var zoomLevelMin = 0;
        var zoomLevelMax = 3;
        img.zoomLevel = 0
        img.scale(0.1);
        img.lockUniScaling = true;
		    img.centeredScaling = true;
        img.clipTo = function(ctx){
        		ctx.save();
		        ctx.setTransform(1, 0, 0, 1, 0, 0);
		            clipArea.render(ctx);
		            ctx.restore();
        }
				fitImageToArea(img);
        canvas.add(img);
        
        img.zoomIn = function() {
          if (zoomLevel < zoomLevelMax) {
            zoomLevel += 0.1;
            img.zoomLevel = zoomLevel;
          }
        };


        img.zoomOut = function() {
          zoomLevel -= 0.1;
          if (zoomLevel < 0) zoomLevel = 0;
          if (zoomLevel >= zoomLevelMin) {
            img.zoomLevel = zoomLevel;
          }
        };

      });

      canvas.on('mouse:wheel', function(option) {
        var imgObj = canvas.getActiveObject();
        if (!imgObj) return;
        option.e.preventDefault();
        if (option.e.deltaY > 0) {
          imgObj.zoomOut();
        } else {
          imgObj.zoomIn();
        }
        canvas.renderAll();
      });
      
      var resize = function() {
	    console.log('resize')
		var height = window.innerHeight;

		var scrollTop = $(window).scrollTop(),
	    elementOffset =...