JSFiddle - React, Tailwind, and code Playground
by falldeaf
HTML
<canvas id="canvas" width="600" height="600"></canvas>JavaScript
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
//Declare variables for the angle, increment and percentage
var a = 180, b=5;
function draw() {
a = a + b;
if(a==360){a=0;}
c = Math.PI * a / 180;
console.log(`c:${c} a:${a}`);
context.clearRect(0, 0, 500, 500);
context.beginPath();
context.lineWidth = 25;
context.strokeStyle='#343434';
//Draw the dynamic circle
context.beginPath();
context.arc(200,200,100,0,c,false);
//Gradient for the dynamic circle
//var grd = context.createRadialGradient(200, 200, 102, 200, 200, 104);
//grd.addColorStop(0, 'lightblue');
//grd.addColorStop(1, 'blue');
//context.strokeStyle = grd;
context.stroke();
}
//Call the function every in 150 milliseconds
draw();
//window.setInterval(draw, 150);