JSFiddle - React, Tailwind, and code Playground

by gautamadude

HTML

<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.2-beta.js"></script>
	<script type="text/javascript" src="http://sole.github.com/tween.js/build/tween.min.js"></script>
	<script type="text/javascript" src="http://sole.github.com/tween.js/examples/js/RequestAnimationFrame.js"></script>
<div id="canvas-container"></div>

JavaScript

var stage = new Kinetic.Stage({
	container: 'canvas-container',
	width: 1000,
	height: 1000,
	background:'#eee'
});

var layer = new Kinetic.Layer();

var doubleArc = function(canvas) {
    var r = this.attrs.radius;
    var w = this.attrs.width;
    var startAngle = this.attrs.startAngle/180;
    var endAngle = this.attrs.endAngle/180;
    if (this.attrs.close == undefined) this.attrs.close = true;
    
    var context = canvas.getContext();
    context.beginPath();
    context.arc(0, 0, r-w, endAngle*Math.PI, startAngle*Math.PI, true);
    if (!(this.attrs.close)) {
        var to = {x: 0 + (r) * Math.cos(startAngle*Math.PI), y: 0 + (r) * Math.sin(startAngle*Math.PI)};
        context.moveTo(to.x, to.y);
    }
    context.arc(0, 0, r, startAngle*Math.PI, endAngle*Math.PI, false);
    if (this.attrs.close) context.closePath();
    canvas.fillStroke(this);
}

var window1 = new Kinetic.Shape({
    drawFunc: doubleArc,
    x: 250,
    y: 250,
    radius: 50,
    width: 30,
    startAngle: 0,
    endAngle: 360,
    clockwise: false,
    stroke: 'black',
    fillPatternOffset: [250, 250],
    rotationDeg: 0,
    draggable: true,
    close: false
});

/*layer.add(window1);
stage.add(layer);*/
var img = new Image();
img.onload = function() {
    window1.attrs.fillPatternImage = this;
    layer.add(window1);
    stage.add(layer);
    newTween();
};
img.src = "http://upload.wikimedia.org/wikipedia/zh/3/34/Lenna.jpg";

var rstart = 100;
var rend = 200;
var wstart = 30;
var wend = 80;
function newTween() {
    new TWEEN.Tween( { radius: rstart, width: wstart } )
    .to( { radius: rend, width: wend }, 500 )
    .easing( TWEEN.Easing.Linear.None )
    .onUpdate( function () {
        window1.attrs.radius = this.radius;
        window1.attrs.width = this.width
        layer.draw();
    }).onComplete( function () {
        rstart = this.radius;
        rend = Math.random()*200;
        wstart = this.width;
        wend = Math.random()*100;
        while (wend > rend) {
      ...