JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.0.js"></script>
<div id="container"></div>
JavaScript
imageObj = new Image();
imageObj.onload = function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 363
});
var layer = new Kinetic.Layer({draggable: true});
var x = stage.width / 2 - 200 / 2;
var y = stage.height / 2 - 137 / 2;
var image = new Kinetic.Image({
image: imageObj,
x: x,
y: y
});
//image.draggable(true);
// add cursor styling
image.on("mouseover", function(){
document.body.style.cursor = "pointer";
});
image.on("mouseout", function(){
document.body.style.cursor = "default";
});
layer.add(image);
stage.add(layer);
};
imageObj.src = 'http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png';