JSFiddle - React, Tailwind, and code Playground

by Ajay Patel

HTML

<script src="http://demo.digi-corp.com:82/vein/js/kinetic-v4.5.2.min.js"></script>
<p>Scroll to zoom, drag to pan</p>

<div id="canvas"></div>

CSS

body {
  -webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

#canvas {
  background: #ccc;  
  width: 500px;
  cursor: pointer;
  cursor: grab;
  cursor: -webkit-grab;
  cursor: -moz-grab;
}
#canvas:active {
  cursor: pointer;
  cursor: grabbing;
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
}

p {
  position: absolute;
  top: 10px;
  left: 10px;
  color: white;
  font: bold 12px Arial, sans-serif;
  text-transform: uppercase;
  z-index: 10;
}

JavaScript

var stage = new Kinetic.Stage({
    container: "canvas",
    width: 500,
    height: 500
});

var draggableLayer = new Kinetic.Layer();
draggableLayer.setDraggable("draggable");


//a large transparent background to make everything draggable
var background = new Kinetic.Rect({
    x: -1000,
    y: -1000,
    width: 2000,
    height: 2000,
    fill: "#000000",
    opacity: 0
});

draggableLayer.add(background);


//don't mind this, just to create fake elements



 var layer = new Kinetic.Layer();
      var imageObj = new Image();
      
      imageObj.src = 'http://themeforest.unitedthemes.com/themes/brooklyn/yellow/images/parallax-banner-1.jpg';
var addCircle = function(){
  draggableLayer.add(new Kinetic.Image({
        x: 0,
          y: 0,
          image: imageObj,
          width: 500,
          height: 500
    })
  );
}
addCircle();

var zoom = function(e) {
  var zoomAmount = e.wheelDeltaY*0.001;
  draggableLayer.setScale(draggableLayer.getScale().x+zoomAmount)
  draggableLayer.draw();
}

document.addEventListener("mousewheel", zoom, false)

stage.add(draggableLayer)