JSFiddle - React, Tailwind, and code Playground

by thindery

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="800" height="1000"></canvas>
</div>
<br>

CSS

#c {
	flex: 1;
	margin: 1em 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://images2.alphacoders.com/147/147320.png", function(img) {
        var zoomLevel = 0;
        var zoomLevelMin = 0;
        var zoomLevelMax = 3;
        img.zoomLevel = 0
        img.scale(0.1);

        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 = $('#c').offset().top,
	    distance      = (elementOffset - scrollTop);
	    //console.log("distance is "+ distance)
	    height = height-distance-20;
		
		// So we need to calculate the proper scaled width
		// that should work well with every resolution
		var ratio = canvas.getWidth()/canvas.getHeight();
		var width = height * ratio;

		$(".upper-canvas, .lower-canvas").css({'width': width,...