JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.0.js"></script>
    <div id="container"></div>

CSS

body {
        margin: 0px;
        padding: 0px;
      }
      canvas {
        border: 1px solid #9C9898;
      }

JavaScript

function loadImages(sources, callback) {
    var images = {};
    var loadedImages = 0;
    var numImages = 0;
    // get num of sources
    for (var src in sources) {
        numImages++;
    }
    for (var src in sources) {
        images[src] = new Image();
        images[src].onload = function() {
            if (++loadedImages >= numImages) {
                callback(images);
            }
        };
        images[src].src = sources[src];
    }
}

function draw(images) {
    var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
    });
    var layer = new Kinetic.Layer();

    var colorPentagon = new Kinetic.RegularPolygon({
        x: 80,
        y: stage.getHeight() / 2,
        sides: 5,
        radius: 70,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4,
        draggable: true
    });

    var patternPentagon = new Kinetic.RegularPolygon({
        x: 220,
        y: stage.getHeight() / 2,
        sides: 5,
        radius: 70,
        fill: {
            scale: { x:0.5, y:0.5 },
            image: images.darthVader,
            offset: [-220, -70]
        },
        stroke: 'black',
        strokeWidth: 4,
        draggable: true
    });

    var linearGradPentagon = new Kinetic.RegularPolygon({
        x: 360,
        y: stage.getHeight() / 2,
        sides: 5,
        radius: 70,
        fill: {
            start: {
                x: -50,
                y: -50
            },
            end: {
                x: 50,
                y: 50
            },
            colorStops: [0, 'red', 1, 'yellow']
        },
        stroke: 'black',
        strokeWidth: 4,
        draggable: true
    });

    var radialGradPentagon = new Kinetic.RegularPolygon({
        x: 500,
        y: stage.getHeight() / 2,
        sides: 5,
        radius: 70,
        fill: {
            start: {
                x: 0,
                y: 0,
                radius: 0
            },
            end: {
       ...