JSFiddle - React, Tailwind, and code Playground

by bighostkim

HTML

<div id="container"></div>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script>
<script>
    var stage = new Kinetic.Stage({
    container: 'container',width: 578,height: 200
    });
    var layer = new Kinetic.Layer();
    var arc = new Kinetic.Shape({
            drawFunc: function(canvas) {
            var context = canvas.getContext();
            var x = stage.getWidth() / 2;
            var y = stage.getHeight()/2;
            var radius = 70;
            var startAngle = 1 * Math.PI;
            var endAngle = 0 * Math.PI;
            var context = canvas.getContext('2d');
            context.beginPath();
            context.arc(x, y, radius, startAngle, endAngle, false);
            //context.closePath();
            canvas.stroke(this);
        },
        fill: '#00D2FF',
        stroke: 'black',
        strokeWidth: 4,
        draggable:true
    });
    
    layer.add(arc);
    stage.add(layer);
</script>