JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="thecanvas"></canvas>

JavaScript

var can = document.getElementById('thecanvas');
var ctx = can.getContext('2d');
can.width = window.innerWidth;
can.height = window.innerHeight;

window.drawCircle = function(x, y) {
    var buffer = document.createElement('canvas');
    buffer.width = can.width;
    buffer.height = can.height;
    bctx = buffer.getContext('2d');
    bctx.drawImage(can, 0, 0);
    var segments = 10,
        currentSegment = 0,
        toRadians = function(deg) {
            return (Math.PI / 180) * deg;
        },
        getTick = function(num) {
            var tick = toRadians(360) / segments;
            return tick * num;
        },
        segment = function(start, end) {
            start = start || getTick(currentSegment);
            end = end || getTick(currentSegment + 1);
            ctx.clearRect(0, 0, can.width, can.height);
            ctx.drawImage(buffer, 0, 0);
            ctx.beginPath();
            ctx.arc(x, y, 60, 0, end);
            ctx.stroke();
            ctx.closePath();
        };



    ctx.lineWidth = 50;
    ctx.strokeStyle = 'rgba(0,0,0,0.5)';

    setTimeout(function render() {
        segment(getTick(currentSegment), getTick(currentSegment + 1));
        currentSegment += 1;
        if (currentSegment < segments) {
            setTimeout(render, 250);
        } else {
            currentTick = 0;
        }
    }, 250);
};

// Draw things before the circle
ctx.fillStyle = 'red'
ctx.fillRect(20, 20, 20, 200);
ctx.fillRect(60, 40, 200, 20);
ctx.fillRect(160, 80, 20, 300);


drawCircle(150, 150);