JSFiddle - React, Tailwind, and code Playground

by Ilya Karpuk

HTML

<div id="canvas"></div>

JavaScript

var sector = function (parent){
    
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    parent.appendChild(canvas);
    
    this.create = function (params){
    var startdeg = params.startdeg || 0;
    var enddeg = params.enddeg || Math.floor(Math.random() * (360 - 20 + 1)) + 20;
    var bigradius = params.bigradius || 100;
    var smallradius = params.smallradius || bigradius / 2;
    var fillcolor = params.fillcolor || "#000";
    var centerx = params.centerx || bigradius;
    var centery = params.centery || bigradius;
    
    canvas.width = bigradius*2;
    canvas.height = bigradius*2;
    ctx.clearRect(0,0,canvas.width ,canvas.height);
    
    
    ctx.fillStyle = fillcolor;
    
    ctx.beginPath();
    ctx.arc(centerx, centery, bigradius, startdeg * (Math.PI/180), enddeg * (Math.PI/180), false);
    ctx.arc(centerx, centery, smallradius, enddeg * (Math.PI/180), startdeg * (Math.PI/180), true);
    ctx.lineTo(Math.cos(startdeg * (Math.PI/180)) * bigradius + centerx, Math.sin(startdeg * (Math.PI/180)) * bigradius + centery);
    ctx.fill();
    
    }
    
}

var anim = new sector(document.getElementById("canvas"));

var i = 1;
var j = 230;
var timer = setInterval(function(){
    if (i<=j){
        anim.create({bigradius:100, enddeg:i});
    }else{
        clearInterval(timer);
    }
    i+=2;
}, 5);