JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/kineticjs/4.6.0/kinetic.min.js"></script>
<!DOCTYPE HTML>
<html>
    <head>
        <title>KineticJS - Zoom and pan  example ( V1r00z ) </title>
        <style>
            body {
                margin: 0px;
                padding: 0px;
            }
            canvas {
                border: 1px solid #9C9898;
            }
            #container {
                cursor:url(http://www.eifund.net/T3/fileadmin/Template/ZoomInCur.gif), pointer;
            }
        </style>
     <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.1.js"></script>
    
        <script>
    
            window.onload = function(){ //init function
                var stage = new Kinetic.Stage({
                    container: 'container',
                    width:  150,
                    height: 100
                }); 
                
                var layer = new Kinetic.Layer();
                var imageF;
                var imageObj = new Image();
                imageObj.onload = function(){
                    imageF = new Kinetic.Image({
                        x: 0,
                        y: 0,
                        width : 150,
                        height:100,
                        image: imageObj
                    });

                    layer.add(imageF);

                    stage.add(layer);
                    
                    
                }

                imageObj.src = "http://www.netzgesta.de/shiftzoom/mosaic.jpg";
                var mouseDown = 0;
                document.body.onmousedown = function() { 
                    ++mouseDown;
            
                }
                 
                var iid; 
                var zoom=0;
                document.getElementById('container').addEventListener('mousedown', function(e) {
                    iid = setInterval(function(){
                        
                       
                       ...