JSFiddle - React, Tailwind, and code Playground

by Ed Becnel

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.2.min.js"></script>
<div id="container"></div>

JavaScript

(function () {

    //create variables at global scope 
    var layer;
    var stage;
    var triangle;
    var triangleLastX = 190;
    var triangleLastY = 120;
    var tween;

    function initTween() {
        tween = new Kinetic.Tween({
            node: triangle,
            duration: 1,
            easing: Kinetic.Easings.EaseInOut,
            x: 400,
            y: 200,
        });
    }

    this.init = function () {
        layer = new Kinetic.Layer();

        stage = new Kinetic.Stage({
            container: 'container',
            width: 800,
            height: 600
        });

        triangle = new Kinetic.RegularPolygon({
            x: 190,
            y: 120,
            sides: 3,
            radius: 80,
            fill: '#00D2FF',
            stroke: 'black',
            strokeWidth: 4,
            draggable: true
        });

        triangle.on('dragstart', function () {
            triangleLastX = triangle.attrs.x;
            triangleLastY = triangle.attrs.y;
        });

        triangle.on('dragend', function () {
            tween.play();
            stage.draw();
        });
        layer.add(triangle);
        stage.add(layer);
        initTween ();
    }

    window.onload = init();
})();