JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <style>
       canvas
        {
            border: 1px solid #9C9898;
        }
    </style>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.1.0.js"></script>
    <script type="text/javascript" src="shapes.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var stage;
            var canvas;
            var context;
            var cursor;
            var item = [];
            var rectX;
            var rectY

            prepareCanvas();

            function prepareCanvas() {

                stage = new Kinetic.Stage("container", 578, 200);
                canvas = stage.getCanvas();

                rectX = canvas.width / 2 - 50;
                rectY = canvas.height / 2 - 25;

                cursor = setupCursor();

                setupColours();

                setupItem();

                $('input[name=type]').change(setupItem);
            }

            /* Functions */

            function setupCursor() {
                return new Kinetic.Shape(function () {
                    var context = this.getContext();
                    context.beginPath();
                    context.lineWidth = 1;
                    context.strokeStyle = "black";
                    context.fillStyle = cursor.color;
                    context.arc(0, 0, 10, 0, Math.PI * 2, true);

                    context.closePath();
                    context.fill();
                    context.stroke();
                });
            }

            function setupColours() {
                var cBlack = createColour(20, 20, 20, 'black');
                var cWhite = createColour(20, 50, 20, 'white');
                var cRed = createColour(20, 20, 50, 'red');
                var cBlue = createColour(20, 50, 50, 'blue');
            }

            function...