JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.5.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function() {
    init();
  });
  
  function init() {
	  var lastDist = 0;
      var startScale = 1;
	  function getDistance(p1, p2) {
        return Math.sqrt(Math.pow((p2.x - p1.x), 2) + Math.pow((p2.y - p1.y), 2));
      }
   
    var image = new Image();
    image.onload = function() {
      kimage = new Kinetic.Image({
        image: image,
        x : 0,
        y : 0
      });
  
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 500,
        height: 500
      });
       
      var layer = new Kinetic.Layer();
       
      var group = new Kinetic.Group({
        draggable: true,
         
        dragBoundFunc: function(pos) {
          var newX = 0;
          if (pos.x < 0) {
            newX = pos.x < stage.getWidth() - kimage.getWidth()
              ? stage.getWidth() - kimage.getWidth() : pos.x;
          }
           
          var newY = 0;         
          if (pos.y < 0) {
            newY = pos.y < stage.getHeight() - kimage.getHeight()
              ? stage.getHeight() - kimage.getHeight() : pos.y;
          }
           
          return {
            x: newX,
            y: newY
          };
        }
      });
	  
	  stage.getContent().addEventListener('click', function(evt) {
			var touch1 = evt.touches[0];
			var touch2 = evt.touches[1];
	
			if(touch1 && touch2) {
			  var dist = getDistance({
				x: touch1.clientX,
				y: touch1.clientY
			  }, {
				x: touch2.clientX,
				y: touch2.clientY
			  });
	
			  if(!lastDist) {
				lastDist = dist;
			  }
	
			  var scale = stage.getScale().x * dist / lastDist;
	
			  stage.setScale(scale);
			  stage.draw();
			  lastDist = dist;
			}
		  }, false);
	
		 ...