JSFiddle - React, Tailwind, and code Playground

by MikeEast

HTML

<script src="http://www.html5canvastutorials.com/libraries/kinetic-v5.0.0-beta.js"></script>
<div id="container"></div>

CSS

body {
    margin: 0px;
    padding: 0px;
}

JavaScript

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

var getPoints = function(items) {
    var points = [];
    for(var i = 0; i < items.length; i++) {
        var startAngle = (((2*Math.PI)/items.length) * i) - Math.PI / 2;
        var endAngle = (((2*Math.PI)/items.length) * (i + 1) ) - Math.PI / 2;
        points.push({
            startX: Math.cos(startAngle), 
            startY: Math.sin(startAngle), 
            endX: Math.cos(endAngle), 
            endY: Math.sin(endAngle), 
            startAngle: startAngle, 
            endAngle: endAngle,
            name: items[i].name
        });
    }
    return points;
};

var getSvgPath = function(point, radius, width) {
    return 'M' + (point.startX * (radius - width) + radius ) + ' ' + (point.startY * (radius - width) + radius) + ' A ' + radius + ' ' + radius + ' 0 0 1 ' + (point.endX * (radius - width) + radius) + ' ' + (point.endY * (radius - width) + radius) + '';
};

var points = getPoints([{name: 'Hello'}, {name: 'Circle'}, {name: 'Arrow'}, {name: 'Rhomb'}, {name: 'Square'}]);
var arc = new Kinetic.Shape({
    sceneFunc: function(context) {
        context.beginPath();
        context.moveTo(250,10);
        var radius = 250;
        var margin = 10;
        var width = 80;
        for(var p in points) {
            var point = points[p]            
            context.arc(point.startX + radius, point.startY + radius, radius - margin, point.startAngle, point.endAngle, false);
            context.lineTo(point.endX * (radius - width) + radius, point.endY * (radius - width) + radius);
            context.arc(point.endX + radius, point.endY + radius, (radius - width), point.endAngle, point.startAngle, true);        
            context.lineTo(point.startX * (radius - margin) + radius, point.startY * (radius - margin) + radius);
            context.moveTo(point.endX * (radius - margin) + radius, point.endY * (radius - margin) +...