JSFiddle - React, Tailwind, and code Playground

by kien16

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) {
    $('#output').html('position mouse on canvas: '+'x: ' + e.clientX + ', y: ' + e.clientY); 
});