JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<br/><p>Click the coffee to get it' attributes</p><br/>
<div id="container"></div>

CSS

canvas{border:1px solid red;}

JavaScript

function initStage(images) {

          var stage = new Kinetic.Stage({
              container: 'container',
              width: 300,
              height: 300
          });

          var layer = new Kinetic.Layer();

          var img = new Image();
          var coffee;
          img.onload = function () {
              coffee = new Kinetic.Image({
                  x: 25,
                  y: 25,
                  name: "Yum!",
                  id: "coffeePic",
                  image: img
              });
              layer.add(coffee);
              stage.add(layer);

              coffee.on('mouseup', function () {
                  var att = "Id: " + this.getId();
                  att += ", width:" + this.getWidth();
                  att += ", height:" + this.getHeight();
                  att += ", x:" + this.getX();
                  att += ", y:" + this.getY();
                  att += ", image:" + this.getImage();
                  alert(att);
                  console.log(att);
              });

          }
          img.src = "http://dl.dropbox.com/u/139992952/coffee.png";

      }
      initStage();