JSFiddle - React, Tailwind, and code Playground

by gunderson

HTML

<canvas id="c" width="500" height="500"></canvas>

JavaScript

function wedge(options) {
    var TWO_PI = Math.PI * 2;
    var settings = {
        canvas: null,
        circleUnit: 1,
        start: 0,
        end: 1,
        ratio: 1,
        radius: 100,
        innerRadius: 0,
        x: 100,
        y: 100,
        color: "#f00"
    };
    $.extend(settings, options);

    if (settings.canvas === null) {
        settings.canvas = document.createElement('canvas');
        settings.canvas.width = settings.radius * 2;
        settings.canvas.height = settings.radius * 2;
    }
    settings.$canvas = $(settings.canvas);
    if (settings.circleUnit === 'radians') settings.circleUnit = TWO_PI;
    if (settings.circleUnit === 'degrees') settings.circleUnit = 360;
    var ctx = settings.canvas.getContext('2d');

    //convert unit to ratio
    if (settings.circleUnit !== 1) {
        settings.start /= settings.circleUnit;
        settings.end /= settings.circleUnit;
    }

    settings.delta = settings.end - settings.start;

    //convert unit to radians 
    settings.start *= TWO_PI;
    settings.end = settings.start + ((settings.delta * settings.ratio) * TWO_PI);

    ctx.clearRect(0, 0, settings.canvas.width, settings.canvas.height);
    ctx.beginPath();
    ctx.fillStyle = settings.color;
    ctx.moveTo(settings.x, settings.y);
    ctx.arc(settings.x, settings.y, settings.radius, settings.start, settings.end);
    ctx.fill();

    return settings.canvas;
}

var iterator = 0.01;
var rate = 0.01;

function iterate(){
    iterator += rate;
    wedge({
        canvas: document.getElementById('c'),
        start: 0,
        end: 1,
        ratio: iterator
    });
    if (iterator < 1){
        window.requestAnimationFrame(iterate);
    }
}

iterate();