JSFiddle - React, Tailwind, and code Playground

by robaldred

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.8/TweenMax.min.js"></script>
<div id="container">
    <canvas id="stage" width="400" height="400"></canvas>
    <div id="ui">
        <div id="hub">
            <canvas id="timer" width="200" height="200"></canvas>
        </div>
    </div>    
</div>

CSS

#container {
    position: relative;
    width: 400px;
    height: 400px;
}

#ui,
#stage {
    position: absolute;
    width: 400px;
    height: 400px;
}

#stage {
    z-index: 1;
}
#ui {
    pointer-events: none;
    z-index: 2;
}

#hub {
    left: 100px;
    top: 100px;
    width: 200px;
    height: 200px;
    position: absolute;
    display: none;
    border-radius: 100%;
    background: #fdffe7;
}

#hub #timer {
    width: 200px;
    height: 200px;
    position: absolute;
}

JavaScript

var canvas = $('#stage').get(0);
var ctx = canvas.getContext("2d");
var angle = 0;
var angle2 = 0;
var $hub = $('#hub');

var timeMax = 60,
    timeLeft = 0,
    middleX = 100,
	middleY = 100,
	maxRadius = 80,
	strokeColor = strokeColor || "#000",
	fillColor = fillColor || "red",
	radianStart = Math.PI - 0.5,
	radianMax = Math.PI * 2,
	arcNorth = Math.PI * -0.5,
    running = false,
    timercanvas = $('#timer').get(0),
    timerctx = timercanvas.getContext("2d");

timerctx.imageSmoothingEnabled = true;				timerctx.webkitImageSmoothingEnabled = true;

function step() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);    
    angle = (angle + 1) % 360;
    angle2 = (angle2 - 1) % 360;
    
    ctx.rect(0,0,400,400);
    ctx.fillStyle = "green";
    ctx.fill();
    
    for(var i = 0; i < 100; i++) {
        var offset = 2*i;
        ctx.save();
        ctx.translate(100+offset,100);
        ctx.rotate( angle*Math.PI/180 );
        ctx.translate(-50,-50);
        ctx.beginPath();    
        ctx.rect(0,0,100,100);
        ctx.fillStyle = "lemonchiffon";
        ctx.fill();
        ctx.restore();
    }
    
     for(var i = 0; i < 100; i++) {
        var offset = 2*i;
        ctx.save();
        ctx.translate(100+offset,300);
        ctx.rotate( angle2*Math.PI/180 );
        ctx.translate(-50,-50);
        ctx.beginPath();    
        ctx.rect(0,0,100,100);
        ctx.fillStyle = "lemonchiffon";
        ctx.fill();
        ctx.restore();
    }
    
    if(running) {
        timerctx.clearRect(0, 0, timercanvas.width, timercanvas.height); 
        timeLeft += .05;
        var timeUsedPercent = (timeMax - timeLeft) / timeMax;
        var rmax = radianMax * timeUsedPercent;
        timerctx.beginPath();
        timerctx.moveTo(middleX, middleY);
        timerctx.arc(middleX, middleY, maxRadius, arcNorth, arcNorth + rmax, false);
        timerctx.fillStyle = "red";
        timerctx.fill();
        if(timeLeft >= 60) {
            timeLeft = 0;   
        }
    }
 ...