JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

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

CSS

#container {
    border:solid 1px #ccc;
    margin-top: 10px;
    width:300px;
}

JavaScript

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

    var mouseX;

    var hair1 = addHair(100, 200, 20, 150);
    var hair2 = addHair(120, 200, 20, 150);
    var hair3 = addHair(140, 200, 20, 150);
    layer.draw();

    function addHair(x, y, width, height) {
        var shape = new Kinetic.Shape({
            drawFunc: function (canvas) {

                if (mouseX >= this.attrs.respondLeft && mouseX <= this.attrs.respondRight) {
                    this.attrs.endX = mouseX;
                }
                var context = canvas.getContext();
                context.beginPath();
                context.moveTo(this.attrs.startX, this.attrs.bottomY);
                context.lineTo(this.attrs.startX, this.attrs.midY);
                context.lineTo(this.attrs.endX, this.attrs.topY);
                canvas.fillStroke(this);
            },
            lineJoin: 'round',
            stroke: 'grey',
            strokeWidth: 12,
            respondWidth: width,
            respondLeft: x - width / 2,
            respondRight: x + width / 2,
            respondHeight: height,
            respondTop: y - 100,
            topY: y - 100,
            midY: y - 50,
            bottomY: y,
            startX: x,
            endX: x
        });
        layer.add(shape);
        return (shape);
    }

    // "bend" when mouse is inside any hairs hit boundaries 
    stage.on('mousemove', function () {
        // set the endX where the hair will bend to
        mouseX = stage.getMousePosition().x;
        layer.draw();
    });