JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://dl.dropboxusercontent.com/u/47067729/kinetic.min.js"></script>
<meta name="viewport" content="initial-scale=1,minimum-scale=1,maximum-scale=1,width=device-width,height=device-height,target-densitydpi=medium-dpi,user-scalable=0"/>

<script src="http://rawgithub.com/lavrton/web-drawing-test/master/scripts/libs/fpsmeter.min.js"></script>
<div id="container"></div>

CSS

body {
    margin: 0px;
    padding: 0px;
  
}
#container {
    background-color: #222;
    display: inline-block;
    width: 100%;
    height: 100%;
    border: 1px solid red;
}
#buttons {
    position: absolute;
    top: 5px;
    left: 10px;
}
#buttons > input {
    padding: 10px;
    display: block;
    margin-top: 5px;
}

JavaScript

function setFPSMeter() {
    var RAF = (function () {
        return window["requestAnimationFrame"] || window["webkitRequestAnimationFrame"] || window["mozRequestAnimationFrame"] || window["oRequestAnimationFrame"] || window["msRequestAnimationFrame"] || FRAF;
    })();

    function FRAF(callback) {
        window.setTimeout(callback, 1000 / 60);
    }

    var fpsDiv = document.createElement("div");
    fpsDiv.style.position = "absolute";
    fpsDiv.style.zIndex="40000";
    document.body.appendChild(fpsDiv);
    
    var meter = new window.FPSMeter(fpsDiv, {
        position: 'fixed',
        zIndex: 10,
        right: '5px',
        top: '5px',
        left: 'auto',
        bottom: 'auto',
        margin: '0 0 0 0',
        interval: 1000,
        graph: true,
        history: 20,
        theme: 'colorful',
        heat: true
    });
    var tick = function () {
        meter.tick();
        RAF(tick);
    };
    tick();
}

setFPSMeter();

console.log(!!window.FPSMeter);

Kinetic.pixelRatio = 1;
//console.log(window.requestAnimationFrame);
// http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js

var width = $("#container").width();
var height = $("#container").height();
console.log("width: "+width+" height: "+height);

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

var layer = new Kinetic.Layer();
// add the layer to the stage
stage.add(layer);


var blob;
var imageObj = new Image();
imageObj.onload = function () {

    var group = new Kinetic.Group({
        draggable: true
    });
    
    var star = new Kinetic.Star({
        innerRadius: 50,
        outerRadius: 70,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 5,
        numPoints: 20,
        x: 200,
        y: 100,
        shadowOffset: 5,
        shadowColor: 'black',
        shadowBlur: 5,
        shadowOpacity: 0.5
      });

    blob = new Kinetic.Image({
        image: imageObj,
        x: 50,
        y:...