JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<button id="myButton">Remove blue layer</button>
<div id="container"></div>

CSS

body {
    padding:20px;
}
#container {
    border:solid 1px #ccc;
    margin-top: 10px;
    width:350px;
    height:350px;
}

JavaScript

var stage = new Kinetic.Stage({
    container: 'container',
    width: 350,
    height: 350
});
var layer1 = new Kinetic.Layer();
var layer2 = new Kinetic.Layer();
stage.add(layer1);
stage.add(layer2);

makeCircle(50, 50, "red", layer1);
makeCircle(150, 150, "blue", layer2);


function makeCircle(x, y, color, theLayer) {

    var circle1 = new Kinetic.Circle({
        x: x,
        y: y,
        radius: 30,
        fill: color,
        stroke: 'black',
        strokeWidth: 4,
        draggable: true
    });
    theLayer.add(circle1);
    theLayer.draw();

}

$("#myButton").click(function () {
    layer2.destroy();
});