JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container"></div>

JavaScript

// you create an stage
var stage = new Kinetic.Stage({
    container: 'container',
    width: 1000,
    height: 550
});

// then create a layer
var layer = new Kinetic.Layer();


// add the layer to the stage
stage.add(layer);

// define the polygon points somewhere and then create a blob with them
var shapeDetails = {
    x: 200,
    y: 200,
    scale: 2,
    offset: [50, 50],
    points: [{
        x: 36,
        y: 0
    }, {
        x: 81,
        y: 10
    }, {
        x: 100,
        y: 50
    }, {
        x: 81,
        y: 90
    }, {
        x: 36,
        y: 100
    }, {
        x: 0,
        y: 73
    }, {
        x: 0,
        y: 27
    }],
    fill: '#AAFFDD',
    strokeWidth:0.2,
    tension: 1.1
};
var nanaPori = new Kinetic.Blob(shapeDetails);

// add the shape to the layer
layer.add(nanaPori);

// another one
var nanaPori2 = new Kinetic.Blob(shapeDetails);
nanaPori2.setFill("#FFFFFF");
nanaPori2.setScale(1.9);
nanaPori2.setRotation(-0.13962634);
layer.add(nanaPori2);

// after each manual change, draw the canvas
layer.draw();
alert('jj');