JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://www.soloproyectos.com/resources/jquery.transformtool.js"></script>
<script src="http://www.soloproyectos.com/resources/jquery.timer-1.0.3.js"></script>
<div id="canvas"></div>
<input id="toggle1" type="button" value="Hide or show transform tool 1" />
<input id="toggle2" type="button" value="Hide or show transform tool 2" />

JavaScript

var _stage = null;
var _layer = null;

_stage = new Kinetic.Stage({
    container: 'canvas',
    width: 640,
    height: 480
});
_layer = new Kinetic.Layer();

var rect1 = new Kinetic.Rect({
    x: 100,
    y: 100,
    width: 150,
    height: 100,
    fill: 'yellow',
    stroke: 'black'
});
_layer.add(rect1);

var rect2 = new Kinetic.Rect({
    x: 300,
    y: 250,
    width: 200,
    height: 80,
    fill: 'green',
    stroke: 'black'
});
_layer.add(rect2);

_stage.add(_layer);
_stage.draw();

// creates a transform tool for the first rectangle
$(rect1).transformTool({
    'handler-radius': 7,
    'handler-fill': 'gray',
    'border-stroke': '#333333'
});

// creates a transform tool for the second rectangle
$(rect2).transformTool({
    'allow-scale': false
});

// hides or shows transform tool 1
$('#toggle1').click(function() {
    $(rect1).transformTool('toggle');
});

// hides or shows transform tool 2
$('#toggle2').click(function() {
    $(rect2).transformTool('toggle');
});