JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.0.min.js"></script>
<div id="output">output</div>
<div id="container"></div>

CSS

body { margin: 0px; padding: 0px;}
canvas {
     border: 1px solid blue;
}

JavaScript

var stage = new Kinetic.Stage({
    container: 'container',
    width: 544,
    height: 216
});
var layer = new Kinetic.Layer();

var imageObj = new Image();
imageObj.src = "http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg";
var yoda = new Kinetic.Image({
    width: 2357,
    height: 2083	  
});

imageObj.onload = function() {
    yoda.setImage(imageObj);
    layer.draw();
};

layer.add(yoda);
stage.add(layer);


yoda.on('mousemove', function(e) {
    var offsetX = e.offsetX || e.layerX,
        offsetY = e.offsetY || e.layerY;
    
    $('#output').html('position mouse on canvas: '+'x: ' + offsetX + ', y: ' +  offsetY); 
});