JSFiddle - React, Tailwind, and code Playground

by Christopher McCulloh

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.3.min.js"></script>
<div id="container"></div>
<button id="line">Click Me to Draw Another Line</button>

CSS

#container {
    border:solid 1px #000;
    margin:10px;
    width:600px;
    height:400px;
}

JavaScript

//KineticJS Draw Line

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

var background = new Kinetic.Rect({
    x: 0,
    y: 0,
    width: stage.getWidth(),
    height: stage.getHeight()
});

var layer = new Kinetic.Layer();

layer.add(background);
stage.add(layer);
layer.drawScene();

drawLine();

function drawLine() {
    var group, line, moving = false;

    layer.on("mousedown", function (e) {
        if (moving) {
            moving = false;
            layer.drawScene();
        } else {
            var mousePos = stage.getMousePosition();

            group = new Kinetic.Group({
                x: mousePos.x,
                y: mousePos.y,
                draggable: true
            });

            group.on("dragstart", function (evt) {
                this.moveToTop();
                document.body.style.cursor = 'move';
            });
            group.on("dragend", function (evt) {
                document.body.style.cursor = 'default';
            });


            line = new Kinetic.Line({
                points: [0, 0, 0, 0], //start point and end point are the same
                stroke: '#000',
                strokeWidth: 2,
                name: 'line'
            });

            line.on("mouseover", function (evt) {
                document.body.style.cursor = 'pointer';
            });
            line.on("mouseout", function (evt) {
                document.body.style.cursor = 'default';
            });

            group.add(line);
            layer.add(group);
            moving = true;
        }
    });

    layer.on("mousemove", function (e) {
        if (moving) {
            var mousePos = stage.getMousePosition();
            var x = mousePos.x - group.getX();
            var y = mousePos.y - group.getY();

            line.getPoints()[1].x = x;
            line.getPoints()[1].y = y;

            moving = true;
            layer.drawScene();
        }
    });

    layer.on("mouseup",...