JSFiddle - React, Tailwind, and code Playground

by JeffC

HTML

<canvas id="c"></canvas>

JavaScript

canvas = document.getElementById("c");
ctx = canvas.getContext("2d");

var canvasHeight = canvas.height = 300;
var canvasWidth = canvas.width = 300;
count = 1;

ctx.beginPath();
ctx.fillStyle = "#0000FF";
ctx.moveTo(60, 120);
ctx.arc(60, 120, 20, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();

var timer = setInterval(redrawTimer, 10);

function convertDegreesToRadians(deg) {
    return deg * Math.PI / 180;
}

function redrawTimer() {
    if (count === 360) {
        clearInterval(timer);
    }
    ctx.beginPath();
    ctx.fillStyle = "#FFFFFF";
    ctx.moveTo(60, 120);
    ctx.arc(60, 120, 20, convertDegreesToRadians(270 + count), convertDegreesToRadians(270), true);
    ctx.closePath();
    ctx.fill();
    count++;
}