JSFiddle - React, Tailwind, and code Playground

by mrleroylee

HTML

<canvas id="example1" width="550" height="550"></canvas>

JavaScript

function example1(){
var canvas = document.getElementById('example1'), 
    context;
    if(canvas.getContext){
        context = canvas.getContext('2d');
        context.fillStyle = "rgb(200,0,0)";
        context.fillRect (75, 75, 250, 250);            
    } else {
    document.write('Your Browser does not support HTML5 Canvas.');
    }
}
//example1();

var x1 = 0;
var y1 = 1.4;
var x2 = .1;
var y2 = 1.1;
var x3 = .4;
var y3 = 1;
var dx1 = .0015;
var dy1 = .0015;
var dx2 = .003;
var dy2 = .003;
var dx3 = .0025;
var dy3 = .0025;
var ctx;

function init() {
  ctx = $('#example1')[0].getContext("2d");
  return setInterval(draw, 10);
}

var dots = [true,true,true,true,true,true,true];
var counter = 0;
var done = true;
function draw(ctx) {
    ctx.beginPath();
    ctx.arc(225, 225, 145, Math.PI*x1, Math.PI*y1, false); 
    ctx.lineWidth = 1;
    ctx.strokeStyle = "#7c9e3f"; // line color
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(225, 225, 149, Math.PI*x2, Math.PI*y2, false); 
    ctx.stroke();
    
    ctx.beginPath();
    ctx.arc(225, 225, 153, Math.PI*x3, Math.PI*y3, false); 
    ctx.stroke();
    
    //Solid outer circle
    ctx.beginPath();
    ctx.arc(225, 225, 138, 0, 2*Math.PI, false); 
    ctx.lineWidth = 3;
    ctx.stroke();
    
    //Sliced circle
    ctx.beginPath();
    ctx.arc(225, 225, 130, 7/12*Math.PI, Math.PI*17/12, false); 
    ctx.fillStyle = "green";
    ctx.fill();
    //Sliced circle
    ctx.beginPath();
    ctx.arc(225, 225, 122, 9/16*Math.PI, Math.PI*23/16, false); 
    ctx.fillStyle = "#fed869";
    ctx.fill();
    //Sliced circle
    ctx.beginPath();
    ctx.arc(225, 225, 122, 1/3*Math.PI, Math.PI*5/3, true); 
    ctx.fillStyle = "#fed869";
    ctx.fill();
    
    //Center circle
    ctx.beginPath();
    ctx.arc(225, 225, 100, 0, 2*Math.PI, false); 
    ctx.fillStyle = "#bbb";
    ctx.fill();
    
    //Dots left
    if(counter > 500 &&counter%5===0){ for(var t=0;t<dots.length;++t) { 
            if(dots[t] && done){dots[t] =...